I have this table and my problem is with last line because have a different width and some cells are combined.
The html is this
<table border="1" width="820" cellpadding="2">
<caption align="bottom">description</caption>
<tr>
<th>lorem ipsum</th>
<th>lorem ipsum lorem ipsum lorem ipsum</th>
<th>lorem ipsum</th>
<th>lorem ipsum</th>
<th>lorem ipsum</th>
<th>lorem ipsum</th>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5(3x4)</td>
</tr>
<tr>
<td>1</td>
<td>Nume produs</td>
<td></td>
<td>1</td>
<td>89,00</td>
<td>89,00</td>
</tr>
<tr>
<td>2</td>
<td>Nume produs</td>
<td></td>
<td>1</td>
<td>89,00</td>
<td>89,00</td>
</tr>
<tr>
<td>3</td>
<td>Cost livrare</td>
<td></td>
<td>1</td>
<td>15,00</td>
<td>15,00</td>
</tr>
<tr>
<td>3</td>
<td>Cost livrare</td>
<td></td>
<td>1</td>
<td>15,00</td>
<td>15,00</td>
</tr>
<tr height="210">
<td colspan="1">Lorem ipsum</td>
<td colspan="2">Lorem ipsum</td>
<td rowspan="2">Lorem</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
This is my try but I can't understand how to to do something like images. I use colspan and rowspan but I don't know how to use them correctly in this case
This is the best i can do for you: http://jsfiddle.net/CvYm5/
<table border="1" width="820" cellpadding="2">
<tr>
<th>lorem ipsum</th>
<th>lorem ipsum lorem ipsum lorem ipsum</th>
<th>lorem ipsum</th>
<th>lorem ipsum</th>
<th>lorem ipsum</th>
<th>lorem ipsum</th>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5(3x4)</td>
</tr>
<tr>
<td>1</td>
<td>Nume produs</td>
<td></td>
<td>1</td>
<td>89,00</td>
<td>89,00</td>
</tr>
<tr>
<td>2</td>
<td>Nume produs</td>
<td></td>
<td>1</td>
<td>89,00</td>
<td>89,00</td>
</tr>
<tr>
<td>3</td>
<td>Cost livrare</td>
<td></td>
<td>1</td>
<td>15,00</td>
<td>15,00</td>
</tr>
<tr>
<td>3</td>
<td>Cost livrare</td>
<td></td>
<td>1</td>
<td>15,00</td>
<td>15,00</td>
</tr>
<tr height="110">
<td colspan="2" rowspan="2">Lorem ipsum</td>
<td colspan="2" rowspan="2">Lorem ipsum</td>
<td>Total</td>
<td>Lorem</td>
</tr>
<tr>
<td>1</td>
<td height="140">LOREM ISPUM 104 Lei</td>
</tr>
Each time there's a vertical separation on some row, it must be 2 different cells on this row AND other rows as well (or be taken into account by a colspan value.
I copy-pasted your HTML code with some background color: http://codepen.io/anon/pen/awfvC
In last rows, you've a separation between the first 2 cells "LOREM IPSUM" and "LOREM IPSUM". So it's 2 cells (and the first one already has colspan="2" because of column 0, 1, 2, 3 in first rows... AND previous rows should have 2 cells (or higher value of colspan) where you've the name of products.
In red the cells you should take into account:
Here is your fiddle with required cells. Just put your height and width and you are done
http://jsfiddle.net/BC4A8/
Use RowSpan and Colspan to merge rows and cols
Related
I'm trying to target a particular <th> within the table below and only that particular <th>
The <th> in question is the <th>Abilities</th> under located after the <th>Weapons</th>
There will be multiple of these in the larger dataset but being able to target in this smaller set of data would be ideal test.
I know :nth-child, :nth-of-type aren't able to help here due to their selector limitations, but is there a way to do so at all?
I'm very much a novice coder and this code is an output from an app with zero support from the developer anymore so highly unlikely the core coding design will ever change.
I also using an external stylesheet which I'd hope the code if there is any would sit in there.
<table cellspacing="-1">
<tr>
<th>Psyker</th>
<th>Cast</th>
<th>Deny</th>
<th>Powers Known</th>
<th>Other</th>
</tr>
<tr>
<td class="profile-name">Primaris Librarian</td>
<td>2</td>
<td>1</td>
<td>Smite, 2 Librarius</td>
<td>-</td>
</tr>
</table>
<table cellspacing="-1">
<tr>
<th>Unit</th>
<th>M</th>
<th>WS</th>
<th>BS</th>
<th>S</th>
<th>T</th>
<th>W</th>
<th>A</th>
<th>Ld</th>
<th>Save</th>
</tr>
<tr>
<td class="profile-name">Primaris Librarian</td>
<td>6"</td>
<td>3+</td>
<td>3+</td>
<td>4</td>
<td>4</td>
<td>5</td>
<td>4</td>
<td>9</td>
<td>3+</td>
</tr>
</table>
<table cellspacing="-1">
<tr>
<th>Weapon</th>
<th>Range</th>
<th>Type</th>
<th>S</th>
<th>AP</th>
<th>D</th>
<th>Abilities</th>
</tr>
<tr>
<td class="profile-name">Bolt pistol</td>
<td>12"</td>
<td>Pistol 1</td>
<td>4</td>
<td>0</td>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td class="profile-name">Force sword</td>
<td>Melee</td>
<td>Melee</td>
<td>+1</td>
<td>-3</td>
<td>D3</td>
<td>-</td>
</tr>
<tr>
<td class="profile-name">Frag grenades</td>
<td>6"</td>
<td>Grenade D6</td>
<td>3</td>
<td>0</td>
<td>1</td>
<td>Blast.</td>
</tr>
<tr>
<td class="profile-name">Krak grenades</td>
<td>6"</td>
<td>Grenade 1</td>
<td>6</td>
<td>-1</td>
<td>D3</td>
<td>-</td>
</tr>
</table>
Easy to achieve in your example HTML, with the help of some pseudo selectors:
table:nth-of-type(3) tr:first-of-type :last-child { color: red; }
<table cellspacing="-1">
<tr>
<th>Psyker</th>
<th>Cast</th>
<th>Deny</th>
<th>Powers Known</th>
<th>Other</th>
</tr>
<tr>
<td class="profile-name">Primaris Librarian</td>
<td>2</td>
<td>1</td>
<td>Smite, 2 Librarius</td>
<td>-</td>
</tr>
</table>
<table cellspacing="-1">
<tr>
<th>Unit</th>
<th>M</th>
<th>WS</th>
<th>BS</th>
<th>S</th>
<th>T</th>
<th>W</th>
<th>A</th>
<th>Ld</th>
<th>Save</th>
</tr>
<tr>
<td class="profile-name">Primaris Librarian</td>
<td>6"</td>
<td>3+</td>
<td>3+</td>
<td>4</td>
<td>4</td>
<td>5</td>
<td>4</td>
<td>9</td>
<td>3+</td>
</tr>
</table>
<table cellspacing="-1">
<tr>
<th>Weapon</th>
<th>Range</th>
<th>Type</th>
<th>S</th>
<th>AP</th>
<th>D</th>
<th>Abilities</th>
</tr>
<tr>
<td class="profile-name">Bolt pistol</td>
<td>12"</td>
<td>Pistol 1</td>
<td>4</td>
<td>0</td>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td class="profile-name">Force sword</td>
<td>Melee</td>
<td>Melee</td>
<td>+1</td>
<td>-3</td>
<td>D3</td>
<td>-</td>
</tr>
<tr>
<td class="profile-name">Frag grenades</td>
<td>6"</td>
<td>Grenade D6</td>
<td>3</td>
<td>0</td>
<td>1</td>
<td>Blast.</td>
</tr>
<tr>
<td class="profile-name">Krak grenades</td>
<td>6"</td>
<td>Grenade 1</td>
<td>6</td>
<td>-1</td>
<td>D3</td>
<td>-</td>
</tr>
</table>
If, due to the dynamic nature of the HTML, using pseudo selectors won't work for you, there sadly is no other way of achieving this other than adding a class, or resorting to JS:
[...document.querySelectorAll('th')].find(th => th.textContent === 'Abilities').style.color = 'red';
<table cellspacing="-1">
<tr>
<th>Psyker</th>
<th>Cast</th>
<th>Deny</th>
<th>Powers Known</th>
<th>Other</th>
</tr>
<tr>
<td class="profile-name">Primaris Librarian</td>
<td>2</td>
<td>1</td>
<td>Smite, 2 Librarius</td>
<td>-</td>
</tr>
</table>
<table cellspacing="-1">
<tr>
<th>Unit</th>
<th>M</th>
<th>WS</th>
<th>BS</th>
<th>S</th>
<th>T</th>
<th>W</th>
<th>A</th>
<th>Ld</th>
<th>Save</th>
</tr>
<tr>
<td class="profile-name">Primaris Librarian</td>
<td>6"</td>
<td>3+</td>
<td>3+</td>
<td>4</td>
<td>4</td>
<td>5</td>
<td>4</td>
<td>9</td>
<td>3+</td>
</tr>
</table>
<table cellspacing="-1">
<tr>
<th>Weapon</th>
<th>Range</th>
<th>Type</th>
<th>S</th>
<th>AP</th>
<th>D</th>
<th>Abilities</th>
</tr>
<tr>
<td class="profile-name">Bolt pistol</td>
<td>12"</td>
<td>Pistol 1</td>
<td>4</td>
<td>0</td>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td class="profile-name">Force sword</td>
<td>Melee</td>
<td>Melee</td>
<td>+1</td>
<td>-3</td>
<td>D3</td>
<td>-</td>
</tr>
<tr>
<td class="profile-name">Frag grenades</td>
<td>6"</td>
<td>Grenade D6</td>
<td>3</td>
<td>0</td>
<td>1</td>
<td>Blast.</td>
</tr>
<tr>
<td class="profile-name">Krak grenades</td>
<td>6"</td>
<td>Grenade 1</td>
<td>6</td>
<td>-1</td>
<td>D3</td>
<td>-</td>
</tr>
</table>
If you're able to add html to the existing table structure the easiest thing to do would be to put a class on the <th> that your trying to target. <th class="abilities">Abilities</th>
With the class added you can then apply styles to that class and they will apply only to any element in the table that you have assigned that class name to.
Then adding this class with the styles you want to your css sheet should do the trick.
.abilities {
custom css styles here!
}
EDIT
Because you cant add styles directly to the existing HTML structure you could use Javascript or jQuery to crawl the page contents and find the word "Abilities" the code for that might look something like this
jQuery('th:contains("Abilities")').addClass('customClassName');
There might be some playing around needed to get it functioning exactly the way you want but this could be an option
the :has() Selector might also be usefull
I am using html-pdf 2.2.0 module to convert my html in pdf. I am using table with multiple rows so I want to use page-break so then a single row does not divide in two pages but its not working when converting it to pdf.
Below is the code sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
table tbody tr {
height: 120px;
border:5px solid red;
}
</style>
<body>
<table border="1" style="page-break-after: always;">
<thead>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
When printing the code (CTRL + P) with simple HTML it looks fine but when converting it to the pdf it doesn't work.
It is really hard to find the good package or API that can convert things to PDF while keeping all the layout. I spent a lot of time investigating and tried a lot of different solutions (directly convert HTML to PDF, converting to DOCX and then from DOCX to PDF...). I would suggest you to check online converting tools (most of them are free and you can use them really quickly, you just need to upload the file and they will give you a PDF back to download). If you only need to convert this one html file that is the best way to go (because one of the tools will probably convert it in the right way). If you need it as a feature, then you can ask the provider of convertor that worked for you for an API access.
Usually when you convert PDF to HTML, it works fine, but when you try to convert it back (even the same HTML) it will not look the same as original. From my experience, the best mapping is between PDF and DOCX files. So maybe you can consider to convert you HTML to DOCX first, and then convert DOCX to PDF. There are npm packages that can do both so you can check them (or consider checking online converting tools agian).
I would recommend to use tr, td { page-break-inside: avoid; } to prevent breaks inside rows and cells.
I would recommed below css to fix this
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:tenter code hereable-footer-group }
</style>
Unfortunately, this occurs using some libs to convert html to pdf in node, it is even treated as a reported bug and so far it doesn't seem to have a solution, however, there is a way around the problem.
If instead of creating several columns and rows, create them all as a table and apply this to CSS:
table, tr, td { page-break-inside: avoid; }
will solve the problem.
Example how create table to solve the problem in HTML:
<table>
<tr>
<th>AA</th>
<th>BB</th>
<th>CC</th>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
...
This was the only way I was able to solve the problem in node of the pdf libs
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 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.
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>