I have a table and I want to hover every second cell or lets better say every cell with content. I want for empty cells .table_pascals_triangle td:emptythe hover effect disabeled.
In my snippet here and on jsfiddle it works like I wanted, but on my page I see the hover effect on the empty cells, too.
.table_pascals_triangle
{empty-cells:hide;
}
.table_pascals_triangle tr.even:hover td:nth-of-type(even){
color:black;
background: #E0E0E0;
}
.table_pascals_triangle tr.odd:hover td:nth-of-type(odd) {
color:black;
background: #E0E0E0;
}
.table_pascals_triangle td:empty {
background: white;
/* this cells shouldn't use the :hover Selector */
}
<table class="table_pascals_triangle">
<tr class="odd">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>2</td>
<td></td>
<td class="dreieckzahl">1</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>3</td>
<td></td>
<td class="dreieckzahl">3</td>
<td></td>
<td class="tetraeder">1</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The trick is to append :not(:empty) to the selectors that do the hovering, so that you won't need a new selector afterwards that undoes the action of the first one.
The problem was one of specificity: the bottommost selector wasn't strong enough to override the above ones.
.table_pascals_triangle
{empty-cells:hide;
}
.table_pascals_triangle tr.even:hover td:nth-of-type(even):not(:empty) {
color:black;
background: #E0E0E0;
}
.table_pascals_triangle tr.odd:hover td:nth-of-type(odd):not(:empty) {
color:black;
background: #E0E0E0;
}
<table class="table_pascals_triangle">
<tr class="odd">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="odd">
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>2</td>
<td></td>
<td class="dreieckzahl">1</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="even">
<td></td>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td>3</td>
<td></td>
<td class="dreieckzahl">3</td>
<td></td>
<td class="tetraeder">1</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
You can use
background:white!important;
The hover will over rule the default background unless it's important.
You cluld also tell the hove to not look for empty cells
td:hover td:not(:empty)
I think the second option looks better but thats's up to you
Related
So what I need to do is change the alignment of the text in the 4th column, but without the first row in the table. And I can only do it in CSS.
I tried using
tbody>tr>:nth-child(4)
but I can't find how to skip the first row
Sample Table
the red cells in the table are the ones I'm talking about
Use the :not() pseudo selector.
td {
padding: 1em;
border: 1px solid black;
}
tbody>tr:not(:first-of-type) :nth-child(4) {
background: red;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I built a grid using a table and a 2D array like so:
<table className = 'table'>
<tbody>
{this.state.board.map((x,i)=>{
return(
<tr key = {i} className = {"row"}>
{x.map((y,j) => {
return (
<td key ={j} className = {"col"}>
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
Which prints a nice 8x8 grid onto the screen. I was trying to figure out a way to use the nth-child css selector to color all the odd squares one color, but I haven't been able to get anything to work thus far. I have tried table tr td: nth-child(odd){background: blue;} and that didn't work either. Is this something I can actually do with the way I created my grid?
I'm assuming that you require a checkerboard pattern.
In that case you need two selectors
table tr:nth-child(odd) td:nth-child(odd),
table tr:nth-child(even) td:nth-child(even) {
background: pink;
}
table {
margin: 1em auto;
}
td {
border: 1px solid black;
padding: 1em;
}
table tr:nth-child(odd) td:nth-child(odd),
table tr:nth-child(even) td:nth-child(even) {
background: pink;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Alternatively, if you actually want only the "odd" cells then one selector will work
table tr td:nth-child(odd) {
background: pink;
}
table {
margin: 1em auto;
}
td {
border: 1px solid black;
padding: 1em;
}
table tr td:nth-child(odd) {
background: pink;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
span {
width: 20px;
height: 20px;
background: #ddd;
display: inline-block;
}
span:nth-child(2n+1) {
background: #000;
}
working fiddle https://jsfiddle.net/jzw0m61v/5/
I am using a simple bootstrap table with almost 11 table cells (td), after the first table row (tr) I want to show a message when someone clicks on the first table row.
so to show that message I need one long table cell with the full width of the table... but unable to create the td.
Here is my simple table body
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Show full width message here</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6">Show full width message here</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
When you say that a <td> is of "full width", it should be mentioned in terms of columns which the <td> is going to be stretched over.
In HTML this term is denoted by the attribute colspan. Its value is arbitrary integer without any unit.
And as obvious, when you want a "full width" <td> this value will vary based on the total number of columns in that <table>.
So in your case based on the number of columns you should assign a value of 6 to the colspan attribute of that td. As shown below.
.....
<tr>
<td colspan="6">Show full width message here</td>
</tr>
.....
Trying to apply a outter border to a table with colspan but the border isn't applied correctly in the right side of the table:
Fiddle: https://jsfiddle.net/Khrys/a00bga3z/
<table class="table table-striped table-hover table-condensed tableborder">
<thead>
<tr>
<th>A</th>
<th colspan="20">B</th>
<th colspan="1">C</th>
<th colspan="6">D</th>
</tr>
<tr>
<th>NAME</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
<th>17</th>
<th>18</th>
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Name</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Any help will be great. Thanks.
I think you mis-calculated the colspan value.
the last one:
<th colspan="6">D</th>
should be:
<th colspan="5">D</th>
Updated fiddle
or, adjust the value in B and C, just make sure the total number matches the th and td in the following rows.
Apply a class of table-bordered instead of defining your own tableborder class.
table-bordered is a built-in class of Bootstrap.
Then, remove the borders from the inner cells with CSS:
.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
border-right: 0;
border-left: 0;
}
Here'a JSFiddle.
Here is my table it's hiking trip table:
<table class="table-done">
<thead>
<tr>
<th>Day</th>
<th>ID</th>
<th>AB</th>
<th>Name</th>
<th>Distance</th>
<th>Hiking time</th>
<th>Time between</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fist Day</td>
<td>1</td>
<td>B</td>
<td>Garbh Bheinn and Belig</td>
<td>10km</td>
<td>6hrs</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1hrs 20min</td>
</tr>
<tr>
<td>Fist Day</td>
<td>2</td>
<td>D</td>
<td>Neist Point Lighthouse</td>
<td>2km</td>
<td>1hrs</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>26min</td>
</tr>
<tr>
<td>First Day</td>
<td>3</td>
<td>E</td>
<td>Dunvegan castle</td>
<td>0km</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I would like to fill every table pane labelled as "Time between" to blue color
so the pane with 1hrs 20min, 26min this should be blue but not the Title "Time between"
I tried:
.table-done td:nth-last-child(even){
background-color:blue;
}
but this doesn't work
Could you help me out please. Thank you :)
.table-done tr:nth-child(even) td:last-child{
background-color:blue;
}
<table class="table-done">
<thead>
<tr>
<th>Day</th>
<th>ID</th>
<th>AB</th>
<th>Name</th>
<th>Distance</th>
<th>Hiking time</th>
<th>Time between</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fist Day</td>
<td>1</td>
<td>B</td>
<td>Garbh Bheinn and Belig</td>
<td>10km</td>
<td>6hrs</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1hrs 20min</td>
</tr>
<tr>
<td>Fist Day</td>
<td>2</td>
<td>D</td>
<td>Neist Point Lighthouse</td>
<td>2km</td>
<td>1hrs</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>26min</td>
</tr>
<tr>
<td>First Day</td>
<td>3</td>
<td>E</td>
<td>Dunvegan castle</td>
<td>0km</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I believe this is what you're looking for.
It is a little unclear EXACTLY what behavior you want. If you want the entire time-between column to have a background except for the header, the following code will work.
.table-done td:last-child {
background-color: blue;
}
<table class="table-done">
<thead>
<tr>
<th>Day</th>
<th>ID</th>
<th>AB</th>
<th>Name</th>
<th>Distance</th>
<th>Hiking time</th>
<th>Time between</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fist Day</td>
<td>1</td>
<td>B</td>
<td>Garbh Bheinn and Belig</td>
<td>10km</td>
<td>6hrs</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1hrs 20min</td>
</tr>
<tr>
<td>Fist Day</td>
<td>2</td>
<td>D</td>
<td>Neist Point Lighthouse</td>
<td>2km</td>
<td>1hrs</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>26min</td>
</tr>
<tr>
<td>First Day</td>
<td>3</td>
<td>E</td>
<td>Dunvegan castle</td>
<td>0km</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>