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>
Related
It should be like
It should be 4 rows and 3 colums. In first column centrall cell takes 2 cells. In second it should be 1 row. And third the same as first
I have this code
<table border="1" width="100%">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="4">2</td>
<td>3</td>
</tr>
<tr>
<td rowspawn="2">4</td>
<td rowspawn="2">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
But it looks like this
I am not 100% sure what you are after however, does this give you what you want?
<table border="1" width="100%">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="4">2</td>
<td>3</td>
</tr>
<tr>
<td style="height:200px;" rowspawn="2">4</td>
<td rowspawn="2">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
<table height="200px" width="900px" border="1px solid black">
<tr>
<td></td>
<td rowspan="4"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Try this code. It Works.
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 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
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.
I have a simple 3 column table (second code sample below). Most of the time it would be displayed on a wide-screen HD TV, so I would like the structure to be like the first code sample below, and yet depending on the width of the screen, if it's viewed on smaller screens instead of having 4 repeating columns groups, change it to 3, then 2 then 1 for phones. How can I do this with CSS/Media queries?
<table>
<tr>
<th>Time</th>
<th>Hole</th>
<th>Player</th>
<th>Time</th>
<th>Hole</th>
<th>Player</th>
<th>Time</th>
<th>Hole</th>
<th>Player</th>
<th>Time</th>
<th>Hole</th>
<th>Player</th>
</tr>
<tr>
<td>12:06 PM</td>
<td>2</td>
<td>Ackerman</td>
<td>11:53 AM</td>
<td>3</td>
<td>Alexander</td>
<td>12:04 PM</td>
<td>3</td>
<td>Allan</td>
<td>02:00 PM</td>
<td>2</td>
<td>Allen</td>
</tr>
</table>
<table>
<tr>
<th>Time</th>
<th>Hole</th>
<th>Player</th>
</tr>
<tr>
<td>12:06 PM</td>
<td>2</td>
<td>Ackerman</td>
</tr>
<tr>
<td>11:53 AM</td>
<td>3</td>
<td>Alexander</td>
</tr>
<tr>
<td>12:04 PM</td>
<td>3</td>
<td>Allan</td>
</tr>
<tr>
<td>02:00 PM</td>
<td>2</td>
<td>Allen</td>
</tr>
<tr>
<td>12:03 PM</td>
<td>1</td>
<td>Anderson</td>
</tr>
<tr>
<td>02:49 PM</td>
<td>3</td>
<td>Apple</td>
</tr>
<tr>
<td>02:53 PM</td>
<td>1</td>
<td>Campbell</td>
</tr>
<tr>
<td>02:15 PM</td>
<td>4</td>
<td>Deane</td>
</tr>
<tr>
<td>04:00 PM</td>
<td>1</td>
<td>Decker</td>
</tr>
<tr>
<td>10:31 AM</td>
<td>5</td>
<td>Esposito</td>
</tr>
<tr>
<td>02:41 PM</td>
<td>4</td>
<td>Estes</td>
</tr>
<tr>
<td>01:29 PM</td>
<td>2</td>
<td>Faidley</td>
</tr>
<tr>
<td>10:31 AM</td>
<td>5</td>
<td>Fisher</td>
</tr>
<tr>
<td>02:16 PM</td>
<td>4</td>
<td>Gaus</td>
</tr>
<tr>
<td>02:15 PM</td>
<td>3</td>
<td>Giancola</td>
</tr>
<tr>
<td>10:31 AM</td>
<td>5</td>
<td>Gibbons</td>
</tr>
<tr>
<td>02:13 PM</td>
<td>3</td>
<td>Hansen</td>
</tr>
<tr>
<td>02:51 PM</td>
<td>2</td>
<td>Healy</td>
</tr>
<tr>
<td>02:42 PM</td>
<td>4</td>
<td>Kain</td>
</tr>
<tr>
<td>04:01 PM</td>
<td>2</td>
<td>Kestner</td>
</tr>
<tr>
<td>02:12 PM</td>
<td>3</td>
<td>King</td>
</tr>
<tr>
<td>11:03 AM</td>
<td>2</td>
<td>Krieger</td>
</tr>
<tr>
<td>02:51 PM</td>
<td>3</td>
<td>Lee</td>
</tr>
</table>
Ok so I have updated my answer to be EXACTLY like your comment there are 3 tables next to eachother with 2 rows of information for an example...here is the code and here is the example site http://codepen.io/anon/pen/eNYvoq
<div class="container-full">
<div class="row">
<div class="col-md-2">
<ul>Time</ul>
<ul>12:06 PM</ul>
<ul>11:53 AM</ul>
</div>
<div class="col-md-1">
<ul>Hole</ul>
<ul>2</ul>
<ul>3</ul>
</div>
<div class="col-md-1">
<ul>Player</ul>
<ul>Ackerman</ul>
<ul>Alexander</ul>
</div>
<div class="col-md-2">
<ul>Time</ul>
<ul>12:06 PM</ul>
<ul>11:53 AM</ul>
</div>
<div class="col-md-1">
<ul>Hole</ul>
<ul>2</ul>
<ul>3</ul>
</div>
<div class="col-md-1">
<ul>Player</ul>
<ul>Ackerman</ul>
<ul>Alexander</ul>
</div>
<div class="col-md-2">
<ul>Time</ul>
<ul>12:06 PM</ul>
<ul>11:53 AM</ul>
</div>
<div class="col-md-1">
<ul>Hole</ul>
<ul>2</ul>
<ul>3</ul>
</div>
<div class="col-md-1">
<ul>Player</ul>
<ul>Ackerman</ul>
<ul>Alexander</ul>
</div>
</div>
</div>
If this doesnt answer your question then comment as to what is not matching what your asking.