I have the following situation in a table that I want to solve using only CSS/LESS:
On the hover of the row indicate interaction on close icon
On the hover of done icon indicate interaction on done icon
This example is simplified to explain the problem I am having.
.row:hover {
.close {
color: red;
}
}
.doneCell:hover {
.done:hover {
color: red;
}
& ~ .closeCell {
.close {
color: black;
}
}
}
What I currently have doesn't exactly do as I want, it removes interaction hover on close icon when the cell is hovered, so it when the doneCell is hovered it looks like there is not interaction. I only want the color black to apply if the .done:hover exists.
I was looking at :not to try solve the problem with something crazy like:
.closeCell:not(~ .doneCell:hover .done:not(&:hover)) {
.close {
color: black;
}
}
but any variation of :not I am trying to use doesn't achieve what I need. I am hoping that there is something simple I am missing that someone can see.
Thanks
Here is my current attempt at it:
.row:hover .close {
color: red;
}
.doneCell:hover .done:hover {
color: red;
}
.doneCell:hover ~ .closeCell .close {
color: black;
}
.close,
.done {
background-color: pink;
}
table {
max-width: 400px;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<table style="width:100%">
<tbody>
<tr class="row">
<td class="cell doneCell">
<i class="material-icons done">done</i>
</td>
<td class="cell closeCell">
<i class="material-icons close">close</i>
</td>
<td>Some data</td>
</tr>
</tbody>
</table>
https://codepen.io/sheogora/pen/VXeJwv
Use an appropiate selector for the first part:
.row > td.closeCell:hover {
.close {
color: red;
}
}
And add the other case:
.row > td.doneCell:hover {
.done {
color: red;
}
}
Now both are painted red when their own cell is on hover.
Related
<style>
div {
color: red;
}
button {
color: yellow;
}
button:hover {
color: green;
}
button:disabled {
color: inherit; /* This sets the color to red but I want yellow */
/* could do this but it's less flexible */
color: yellow;
}
</style>
<div>
<button disabled>Yo</button>
</div>
Above explains the problem that I have. I've tried using inherit, unset, initial but none of them achieve what I want. "inherit" is close but is uses the parent color. I would like to revert the color back to the original cover when an item is disabled even when its hovered without having to explicitly declare the color in the disabled pseudoclass.
You can use CSS variable to define your colors and avoid the change inside the pseudo class:
:root {
--main-color: yellow;
}
div {
color: red;
}
button {
color: var(--main-color);
}
button:hover {
color: green;
}
button:disabled {
color: var(--main-color);
}
<div>
<button disabled>Yoooooo</button>
</div>
Or make some changes to your selectors. Avoid the hover to be applied to the disabled button and this one will by default keep the initial color:
div {
color: red;
}
button {
color: yellow;
}
button:not([disabled]):hover {
color: green;
}
<div>
<button disabled>Yoooooo</button>
</div>
<div>
<button >Yoooooo yooo</button>
</div>
Why not using this?
The :not() CSS pseudo-class represents elements that do not match a list of selectors.
button, button:disabled {
color: yellow;
}
button:not(:disabled):hover {
color: green;
}
Or
button {
color: yellow;
}
button:not(:disabled):hover {
color: green;
}
https://codepen.io/anon/pen/XZepyB
div {
color: red;
}
button,
button:disabled {
/* assign the default colors together */
color: yellow;
}
button:hover {
color: green;
}
button:disabled:hover {
/* then override the disable state separately as needed */
color: #cc00cc;
}
Not sure if I understand you correctly, but this basic CSS mechanism would be:
div {
color: red;
}
button, button:hover:disabled {
color: yellow;
}
button:hover {
color: green;
}
<div>
<button>Yo</button>
</div>
<div>
<button disabled>Yo</button>
</div>
<div>
<button disabled>Yo</button>
</div>
Just add ":disabled:hover" to the "button" selector and remove the ":disabled" one:
button,
button:hover:disabled {
color: yellow;
}
I'm trying to make it so when I :hover over a td, the span inside changes to white and the background of the td changes to blue. However, none of the similar questions seemed to help me on this.
First row of table for example:
<tbody>
<tr>
<td>
<h4>
<span>
<strong>Account Holder Collection Procedures</strong>
</span>
</h4>
</td>
<td>
<h4>
<span>
<strong>AMVIR Help Sheet</strong>
</span>
</h4>
</td>
</tr>
</tbody>
Here's some CSS I've tried that doesn't work:
td:hover > h4 > span{
color: #fff !important;
}
td:hover > span{
color: #fff !important;
}
td:hover ~ span{
color: #fff !important;
}
td:hover + span{
color: #fff !important;
}
td:hover span{
color: #fff !important;
}
This makes the td background the right color, but will only change the span color if you mouse over the span, not the td:
td:hover{
background: #0073a5;
}
span:hover{
color: #fff !important;
}
This is what the above CSS looks like if I put my mouse on the td, but not the span:
Solution:
div[class*="et_pb_tab_"] td:hover span{
color: #fff !important;
}
The CSS will become this:
td:hover {
background-color: blue;
}
td:hover span {
color: white;
}
.et_pb_tab_0 td:hover h4{ color: #fff !important; }
Your issue is that you're not mentioning the parent of the <span> which will affect it when you hover it. In our case the <td>.
It should always be like this:
.parent:hover .child {
/* ... */
}
So your CSS needs to be edited to:
td:hover{
background: #0073a5;
}
td:hover span{
color: #fff !important;
}
You can see that it matches the format mentioned above!
This is not related to the question, but you can add transition: all .1s ease; to the <td> and <span> for a smoother animation
I read a lot of questions about my problem, but none were really effective for my case. I have this style in the upper part of my view (I know, I'll later transfer it to the bootstrap). My goal is to make my table have alternative row shading. I don't particularly care about the colors for now, I just want the functionality.
I run the site on Mozilla and Chrome. I have refreshed the cache.
<style>
table, th, td {
border: 2px solid gray;
border-collapse: collapse;
border-right: none;
background: white;
color: #333333; /*#333333*/
}
table {
border-left: none;
}
th {
text-align: center;
}
tr:nth-child(odd) { background:#eee; }
tr:nth-child(even) { background:#fff; }
</style>
I have a table with the following format:
<div class="tableIndex">
<table id="tableBe">
<tr>
<th></th>
</tr>
#if (Model.Count() == 0)
{
<tr>
<td colspan="25" , align="left" style="border-left:none !important">
<b>No issues match search criteria</b>
</td>
</tr>
}
else
{
foreach (var item in Model)
{
<tr>
<td></td>
</tr>
}
}
</table>
</div>
Everything works, except for the nth-child styling. Please assist. Sorry for the code wall, I just need to point out that I have an if construction there.
When I try to inspect element, I get no reference to the tr:nth-child commands, although I get the other effects in the <style>. Please assist. Thanks in advance!
it is because you have background: white; on td
move background: white; from table,th,td { and put it under table {
Your code is applying color to your tr based on your condition. But it got overwrite with the styles you have applied for th and td background color. So change your style like below.
tr:nth-child(odd) td{ background:#eee; }
tr:nth-child(even) td { background:#fff; }
DEMO
You have set td's background earlier. So set td's background instead of tr. Following should work
tr:nth-child(odd) td { background:#eee; }
tr:nth-child(even) td { background:#fff; }
Full Code
table, th, td {
border: 2px solid gray;
border-collapse: collapse;
border-right: none;
background: white;
color: #333333; /*#333333*/
}
table {
border-left: none;
}
th {
text-align: center;
}
tr:nth-child(odd) td {
background: #eee;
}
tr:nth-child(even) td {
background: #fff;
}
<table>
<tr><td>111111111</td><td>2222222222</td></tr>
<tr><td>111111111</td><td>2222222222</td></tr>
<tr><td>111111111</td><td>2222222222</td></tr>
<tr><td>111111111</td><td>2222222222</td></tr>
</table>
I have a simple html table like this:
<table>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tbody>
<tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr>
<tr class="even"><td>Value 3</td><td>Value 4</td></tr>
<tr class="odd"><td>Value 5</td><td>Value 6</td></tr>
<tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr>
</tbody>
</table>
And I would like to style it the following way:
header row with a box-shadow
whitespace between the header row and the first body row
I have tried different things:
table {
/* collapsed, because the bottom shadow on thead tr is hidden otherwise */
border-collapse: collapse;
}
/* Shadow on the header row*/
thead tr { box-shadow: 0 1px 10px #000000; }
/* Background colors defined on table cells */
th { background-color: #ccc; }
tr.even td { background-color: yellow; }
tr.odd td { background-color: orange; }
/* I would like spacing between thead tr and tr.first-row */
tr.first-row {
/* This doesn't work because of border-collapse */
/*border-top: 2em solid white;*/
}
tr.first-row td {
/* This doesn't work because of border-collapse */
/*border-top: 2em solid white;*/
/* This doesn't work because of the td background-color */
/*padding-top: 2em;*/
/* Margin is not a valid property on table cells */
/*margin-top: 2em;*/
}
See also: http://labcss.net/#8AVUF
Does anyone have any tips on how I could do this? Or achieve the same visual effect (i.e. bod-shadow + spacing)?
I think I have it in this fiddle and I updated yours:
tbody:before {
content: "-";
display: block;
line-height: 1em;
color: transparent;
}
EDIT better & simpler:
tbody:before {
content:"#";
display:block;
line-height:10px;
text-indent:-99999px;
}
This way text is really invisible
Moreover you can use Zero-Width Non-Joiner to minimize sinsedrix CSS:
tbody:before {line-height:1em; content:"\200C"; display:block;}
This will give you some white space between the header and table content
thead tr {
border-bottom: 10px solid white;
}
Although setting the border colour is a bit of a cheat method, it will work fine.
Form investigation, you can't set box-shadow to a table row, but you can to table cells:
th {
box-shadow: 5px 5px 5px 0px #000000 ;
}
(I'm not sure how you want the shadow to look like, so just adjust the above.)
This worked for me on Chrome (for other browsers I don't know).
.theTargethead::after
{
content: "";
display: block;
height: 1.5em;
width: 100%;
background: white;
}
Such css code creates an empty white space between the thead and the tbody of the table.
If I set the background to transparent, the first column of the above tr > th elements shows its own color (green in my case) making about the first 1 cm of the ::after element green too.
Also using the "-" sign in the row content : "-"; instead of the empty string "" can create problems when exporting the printed pages to file, i.e. pdf. Of course this is parser/exporter dependent.
Such exported file opened with a pdf editor (for ex.: Ms word, Ms Excel, OpenOffice, LibreOffice, Adobe Acrobat Pro) could still contain the minus sign. The empty string doesn't have the same issue.
No problems in both cases if the printed html table is exported as image: nothing is rendered.
I didn't notice any issue even using
content : "\200C";
So box-shadow doesn't work well on the tr element... but it does work on a pseudo content element; sinsedrix put me on the right track and this is what I ended up with:
table {
position: relative;
}
td,th {padding: .5em 1em;}
tr.even td { background-color: yellow; }
tr.odd td { background-color: orange; }
thead th:first-child:before {
content: "-";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
box-shadow: 0 1px 10px #000000;
padding: .75em 0;
background-color: #ccc;
color: #ccc;
}
thead th {
padding-bottom: 2em;
}
While all the solutions above are great, the result is inconsistent across browsers, so I figured out a better way to do it based on my heinous experience with email templates.
Just add a dummy tbody in-between the actual tbody and the thead, nested in the dummy tbody should be a td with height set to the desired spacing. Example below
<table>
<thead>
<tr>
<td>
</td>
</tr>
</thead>
// Dummy tbody
<tbody>
<tr>
<td class="h-5"></td>
</tr>
</tbody>
// Actual tbody
<tbody class="rounded shadow-outline">
<tr v-for="(tableRow, i) in tableBody" :key="`tableRow-${i}`">
<td v-for="tableRowItem in tableRow" :key="tableRowItem" class="table-body">
{{ tableRowItem }}
</td>
</tr>
</tbody>
</table>
This should do the trick:
table {
position: relative;
}
thead th {
// your box shadow here
}
tbody td {
position: relative;
top: 2rem; // or whatever space you want between the thead th and tbody td
}
And this should play nice with most browsers.
Example:
<style type="text/css">
table {
border: 1px solid red;
border-collapse: collapse;
text-align: left;
}
#col-1 {
padding-left: 20px;
background-color: tan;
}
#specific-cell {
padding-left: 20px;
}
</style>
<table>
<col id="col-1">
<col id="col-2">
<tr>
<th>foo</th>
<th>bar</th>
</tr>
<tr>
<td>data1</th>
<td>data2</th>
</tr>
<tr>
<td id="specific-cell">data1</th>
<td>data2</th>
</tr>
<tr>
<td>data1</th>
<td>data2</th>
</tr>
</table>
The color is applied to the column but not the padding. If I use classes/ids on cells directly, it works.
Am I forced to use them, or is there a way taking advantage of the <col> tag?
It's not supposed to work, at least with CSS 2.1. You may have a look at the CSS 2.1 table columns specification.
You can circumvent this by using :first-child and +:
/* first column */
td:first-child {
padding-left: 20px;
}
/* second column */
td:first-child + td {
padding-left: 10px;
}
/* third columns */ {
td:first-child + td + td {
padding-left: 0;
}
This works for me in IE with the following DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
and the styles
#col-1 {
padding-left: 50px;
background-color: tan;
}
#col-2 {
padding-left: 100px;
background-color: lightgreen;
}
What doctype are you using... and what browser are you using...
hmm... just checked doesn't seem to work in Firefox
Alex's answer works for me, except it's not very scalable for lots of columns and quickly becomes hard to read. I ended up using :nth-of-type(n) instead, however this selector was introduced in CSS3.
Selector: :nth-of-type(n)
Example: p:nth-of-type(2)
Result: Selects every <p> element that is the second <p> element of its parent
Example:
/*column 1*/
#myTable td:nth-of-type(1)
{
padding-left: 20px;
background-color: tan;
}
/*column 2*/
#myTable td:nth-of-type(2)
{
padding-left: 10px;
}