"A selector's weighting is evaluated based on the components that make it up, with id's given a weighting of 100, classes with a weighting of 10, and element selectors with weighting of 1."
According to this th should weight 1 while tr:nth-child(2n+1) should weigh 11 due to pseudo class. but the background color of th is used when displayed in the browser. Can you explain why ?
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
td,
th {
border: thin dotted gray;
padding: 5px;
}
caption {
font-style: italic;
padding-top: 8px;
}
td.center,
th.center {
text-align: center;
}
td.right,
th.right {
text-align: right;
}
th {
background-color: #cc6600;
}
tr:nth-child(2n+1) {
background-color: #fcba7a;
}
<table>
<caption>The cities I visited on my Segway'n USA travels</caption>
<tr>
<th>City</th>
<th class="center">Date</th>
<th class="center">Temprature</th>
<th class="right">Altitude</th>
<th class="right">Population</th>
<th class="center">Dinner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td class="center">June 15th</td>
<td class="center">78</td>
<td class="right">1,204 ft</td>
<td class="right">29,686</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Magic City, ID</td>
<td class="center">June 25th</td>
<td class="center">74</td>
<td class="right">5,312 ft</td>
<td class="right">50</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Bountiful, UT</td>
<td class="center">July 10th</td>
<td class="center">91</td>
<td class="right">4,226 ft</td>
<td class="right">41,173</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Last Chance, CO</td>
<td class="center">July 23rd</td>
<td class="center">102</td>
<td class="right">4,780 ft</td>
<td class="right">256</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Truth Or Consequences, NM</td>
<td class="center">August 9th</td>
<td class="center">93</td>
<td class="right">4,242 ft</td>
<td class="right">7,289</td>
<td class="center">5/5</td>
</tr>
<tr class="cellcolor">
<td>Why, AZ</td>
<td class="center">August 18th</td>
<td class="center">104</td>
<td class="right">860 ft</td>
<td class="right">480</td>
<td class="center">3/5</td>
</tr>
</table>
th and tr are two different elements, so it wouldn't effect each other.
This isn't an issue of specificity. You are dealing with two different selectors.
The first selector targets table rows.
tr:nth-child(2n+1) {
background-color: #fcba7a;
}
The other selector targets table headings.
th {
background-color: #cc6600;
}
If you want to actually measure specificity, then have them target the same elements:
tr:nth-child(2n+1) > th {
background-color: #fcba7a;
}
th {
background-color: #cc6600;
}
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
td,
th {
border: thin dotted gray;
padding: 5px;
}
caption {
font-style: italic;
padding-top: 8px;
}
td.center,
th.center {
text-align: center;
}
td.right,
th.right {
text-align: right;
}
th {
background-color: #cc6600;
}
tr:nth-child(2n+1) > th {
background-color: #fcba7a;
}
<table>
<caption>The cities I visited on my Segway'n USA travels</caption>
<tr>
<th>City</th>
<th class="center">Date</th>
<th class="center">Temprature</th>
<th class="right">Altitude</th>
<th class="right">Population</th>
<th class="center">Dinner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td class="center">June 15th</td>
<td class="center">78</td>
<td class="right">1,204 ft</td>
<td class="right">29,686</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Magic City, ID</td>
<td class="center">June 25th</td>
<td class="center">74</td>
<td class="right">5,312 ft</td>
<td class="right">50</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Bountiful, UT</td>
<td class="center">July 10th</td>
<td class="center">91</td>
<td class="right">4,226 ft</td>
<td class="right">41,173</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Last Chance, CO</td>
<td class="center">July 23rd</td>
<td class="center">102</td>
<td class="right">4,780 ft</td>
<td class="right">256</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Truth Or Consequences, NM</td>
<td class="center">August 9th</td>
<td class="center">93</td>
<td class="right">4,242 ft</td>
<td class="right">7,289</td>
<td class="center">5/5</td>
</tr>
<tr class="cellcolor">
<td>Why, AZ</td>
<td class="center">August 18th</td>
<td class="center">104</td>
<td class="right">860 ft</td>
<td class="right">480</td>
<td class="center">3/5</td>
</tr>
</table>
Related
I need to get my first column to stay as sticky when I scroll table side ways.
https://jsfiddle.net/zinoui/BmLpV/
Already tried this but couldn't get it work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
td {
border-spacing: 1;
border: 1px solid #d2d2d2;
}
table {
border-collapse: collapse;
border-spacing: 15;
width: 100%;
}
td {
text-align: left;
padding: 8px;
color: black;
font-weight: bold;
text-align: center;
}
th.rotate {
height: 140px;
white-space: nowrap;
}
th.rotate > div {
transform:
translate(47px,50px)
rotate(315deg);
width: 30px;
}
th.rotate > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
.csstransforms & th.rotate {
height: 140px;
white-space: nowrap;
}
</style>
</head>
<body>
<div style="overflow-x:auto;">
<table>
<tr>
<th>Nimi</th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
<th class="rotate"><div><span>Testitestitesti</span></div></th>
</tr>
<tr>
<td>
<a href="#1" style="color:black">
<div style="height:100%;width:100%">
Pelle<br>Pyrkyri
</div></a></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
</tr>
<tr>
<td>
<a href="#2" style="color:black">
<div style="height:100%;width:100%">
Lilli<br>Lyllerö
</div></a></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="##006600"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
</tr>
<tr>
<td>Kelpo<br>Keppana</td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
</tr>
<tr>
<td>Paula<br>Pauligilta</td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="##006600"></td>
<td bgcolor="red"></td>
<td bgcolor="##006600"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="##006600"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="##006600"></td>
</tr>
<tr>
<td>Alfred<br>Aikuinen</td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
<td bgcolor="##006600"></td>
</tr>
</table>
</div>
</body>
</html>
This is what I tried with solution found here: https://jsfiddle.net/zinoui/BmLpV/ . First column stayed sticky but everything else is screwed and not working as intended. Here is my try: https://jsfiddle.net/vzwpyjke/
Try giving the column a position: absolute
Check out this example, should have what you need:
HTML
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>
<th>Number</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Prior to NBA/Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
<td>15</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
<td>Kentucky/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Isaiah Thomas</td>
<td>22</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
<td>Washington/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Ben McLemore</td>
<td>16</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
<td>Kansas/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Marcus Thornton</td>
<td>23</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
<td>Louisiana State/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Jason Thompson</td>
<td>34</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
<td>Rider/USA</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
.zui-table {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-table tbody td {
border-bottom: solid 1px #DDEFEF;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
margin-left: 141px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.zui-table .zui-sticky-col {
border-left: solid 1px #DDEFEF;
border-right: solid 1px #DDEFEF;
left: 0;
position: absolute;
top: auto;
width: 120px;
}
http://jsfiddle.net/zinoui/BmLpV/
So I have the following table that I have created using HTML and CSS: However, I would like the three pieces of information under Harvesting to be split divided evenly so that each cell takes the same amount of space in the Harvesting column. Right now, the table cell with electroflocculation takes up the space of 2 cells because I assigned it to temporarly do so using the rowspan attribute when it should ideally be taking up the space of 4/3 of a cell,
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<body>
</html>
You can insert another table in that and style the cells, adding borders to get it done. It's not pretty but it works.
<html>
<head>
<style>
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12 px;
color: #111111;}
th {
letter-spacing: 0.1em;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
}
.ExtractionConversion {
background-color: #f4cccc;
}
.Cultivation {
background-color: #d9ead3;
}
.Harvesting {
background-color: #fce5cd;
}
.Dewatering {
background-color: #c9daf8;
}
.Extraction {
background-color: #d9d2e9;
}
.Conversion {
background-color: #fff2cc;
}
</style>
</head>
<body>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td class="Harvesting">Centrifugation</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Harvesting">Electrocoagulation</td>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Harvesting">Electroflocculation</td>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<table width=800 height=100 style="text-align: center" padding="10">
<thead>
<th>Cultivation</th>
<th>Harvesting</th>
<th>Dewatering</th>
<th>Extraction</th>
<th>Conversion</th>
</thead>
<tbody>
<tr>
<td rowspan="4" class="Cultivation";>Photobioreactor</td>
<td rowspan="4" class="Harvesting" style="padding:0;">
<table cellpadding=0 cellspacing=0 width=100% height=100% style="text-align: center">
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Centrifugation</td>
</tr>
<tr>
<td class="Harvesting" style="border-bottom:2px solid white;">Electrocoagulation</td>
</tr>
<tr>
<td class="Harvesting">Electroflocculation</td>
</tr>
</table>
</td>
<td rowspan="2" class="Dewatering">Heat Drying</td>
<td rowspan="2" class="Extraction">Wet Solvent Extraction</td>
<td class="Conversion">Decarboxylation<td>
</tr>
<tr>
<td class="Conversion">Transesterfication</td>
</tr>
<tr>
<td rowspan="2" class="Dewatering">Speed Drying</td>
<td colspan="2" class="ExtractionConversion">HTL-CHG</td>
</tr>
<tr>
<td colspan="2" class="ExtractionConversion">Pyrolysis</td>
</tr>
</tbody>
</table>
<br>
<body>
</html>
I am trying to make table inside of table meant nested table. Now its look like this screenshot . But i need align from left. Because i have use same count column in each row.
You can see what i have tried to get this output.
Thanks in advance
.report-table {
border-collapse: collapse;
width: 100%;
font-family: Arial;
}
.report-table .col-name {
width: 150px;
}
.report-table .col-title {
width: 150px;
}
.report-table .col-carried {
width: 60px;
}
.report-table .col-earned {
width: 60px;
}
.report-table .col-used {
width: 60px;
}
.report-table .col-scheduled {
width: 60px;
}
.report-table .col-balance {
width: 60px;
}
.report-table .col-to-be {
width: 60px;
}
.report-table .col-available {
width: 60px;
}
.report-table .inner-table tr td{
border: 0;
}
.report-table.hr-table .inner-table {
background: none;
border: 0;
}
.report-table.hr-table .inner-table td {
vertical-align: top;
}
.report-table.hr-table tr {
border-top: 1px solid #333;
}
.report-table.hr-table td,
.report-table.hr-table th{
padding: 10px;
vertical-align: top;
text-align: left;
}
.report-table.hr-table .inner-table td:first-child {
padding-left: 0;
}
<table class="tablesorter hr-table hr-table-striped report-table">
<thead>
<tr>
<th class="header col-name">Name<span></span></th>
<th class="header col-title">Leave Title<span></span></th>
<th class="header col-carried">Carried Over<span></span></th>
<th class="header col-earned">Earned<span></span></th>
<th class="header col-used">Used <span></span></th>
<th class="header col-scheduled">Scheduled <span></span></th>
<th class="header col-balance">Balance<span></span></th>
<th class="header col-to-be">To-be-earned<span></span></th>
<th class="header col-available">Avaliable<span></span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-name">Ethan Hunt</td>
<td colspan="8">
<table class=" hr-table inner-table">
<tr>
<td class="col-title">Vacation</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Sickness</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Training</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="col-name">Lara Craft</td>
<td class="col-title">Training</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-name">Ethan Hunt</td>
<td colspan="8">
<table class=" hr-table inner-table">
<tr>
<td class="col-title">Vacation</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Sickness</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Training</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Here is JSFIDDLE
Any nested table complicates the entire layout and functionality of all tables involved. <tbody> element was created to allow us to divide a table into sections that share the same exact columns. It makes very little sense to introduce another table with the same type of data and shove it it into one column. There's no advantage to wrap it in a <table> element then keep it in one column of another table, all cells within the nested <table> are still subject to the style and behavior of the inner <table>. That one column that is just the name column is stretched out in order to align to the column of the outer <table> makes no sense.
Plunker
Details are commented extensively in demos. Although responsive (minimally), it is best viewed in Full page mode
Demo
body,
html {
width: 100%;
height: 100%;
font: 400 100%/1.2 Arial
}
* {
margin: 0;
padding: 0;
border: 0
}
/* table-layout: fixed gives us more control over <td>
|| dimensions and <table> behavior
*/
.report-table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
margin: 30px auto;
font-size: 1em
}
thead tr {
border-bottom: 3px double #111
}
/* Each <th> in the <thead> has text that clips into an
|| automatic ellipsis if and when <table> gets narrower
*/
thead th {
padding: 10px 5px 5px;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
tbody tr {
border: 1px transparent
}
tbody tr:last-of-type {
border-bottom: 1px solid #111
}
tbody th,
td {
vertical-align: top;
text-align: left;
padding: 10px
}
.full {
border-bottom: 1px solid #111
}
td {
text-align: center
}
col {
width: 10%
}
col.name,
col.type {
width: 15%
}
/* CSS HIghlight Featue */
/* All checkboxes and radio buttons are
|| display:none;
*/
.chx,
.rad,
.reset {
display: none
}
label {
font: inherit;
cursor: pointer;
display: inline-block
}
/* These rulesets will highlight a column when
|| a <label> is clicked which in turn checks the
|| checkbox which in turn changes the background
|| color of a column
*/
#chx1:checked~table col.name,
#chx2:checked~table col.type {
background: #ff0
}
#chx3:checked~table col.carried,
#chx4:checked~table col.earned {
background: #00ff80
}
#chx5:checked~table col.used {
background: #ff8080
}
#chx6:checked~table col.scheduled,
#chx7:checked~table col.balance,
#chx8:checked~table col.yet,
#chx9:checked~table col.available {
background: #ff0
}
.on {
display: inline-block
}
/* These radio buttons operate in the same
|| manner as the checkboxes with some exceptions:
|| - There's 2 <label>s for each radio
|| - The <label>s toggle a row highlighting
|| - The <label>s alternate between display:
|| none and inline-block.
|| - Only one <tbody> at a time may be highlighted
*/
#rad1:checked~table tbody#e-hunt-40318,
#rad2:checked~table tbody#l-craft-61232,
#rad3:checked~table tbody#r-hertz-20663 {
background: rgba(0, 255, 255, .5)
}
#rad1:checked~table tbody#e-hunt-40318 .reset {
display: inline-block
}
#rad1:checked~table tbody#e-hunt-40318 .on {
display: none
}
#rad1:checked~table tbody#e-hunt-40318 tr,
#rad3:checked~table tbody#r-hertz-20663 tr {
border-bottom: 1px dashed red
}
#rad2:checked~table tbody#l-craft-61232 .reset {
display: inline-block
}
#rad2:checked~table tbody#l-craft-61232 .on {
display: none
}
#rad3:checked~table tbody#r-hertz-20663 .reset {
display: inline-block
}
#rad3:checked~table tbody#r-hertz-20663 .on {
display: none
}
#reset:checked~table tbody {
background: initial
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='report.css' rel='stylesheet'>
<style>
</style>
</head>
<body>
<!--
|[Highlighting (Optional)
These checkboxes and radio buttons are optional.
They are part of an intricate highlighting feature
that leverages:
- cascading
- sibling selectors: ~
- <label> and 'for' attribute
- checkbox and radio <input>
input.chx highlights columns-->
<input id='chx1' class='chx' type='checkbox'>
<input id='chx2' class='chx' type='checkbox'>
<input id='chx3' class='chx' type='checkbox'>
<input id='chx4' class='chx' type='checkbox'>
<input id='chx5' class='chx' type='checkbox'>
<input id='chx6' class='chx' type='checkbox'>
<input id='chx7' class='chx' type='checkbox'>
<input id='chx8' class='chx' type='checkbox'>
<input id='chx9' class='chx' type='checkbox'>
<!--input.rad highlights a row-->
<input id='rad1' class='rad' name='rad' type='radio'>
<input id='rad2' class='rad' name='rad' type='radio'>
<input id='rad3' class='rad' name='rad' type='radio'>
<input id='reset' class='rad' name='rad' type='radio'>
<table class="tablesorter hr-table hr-table-striped report-table">
<!--
|[<colgroup>/<col> (Recommended)
<colgroup> and <col> are elements with a
special purpose of assigning a limited number of
style properties to a column (vertical stack of
<td>). Using them will reduce amount of classes
assigned to individual cells.-->
<colgroup>
<col class='name'>
<col class='type'>
<col class='carried'>
<col class='earned'>
<col class='used'>
<col class='scheduled'>
<col class='balance'>
<col class='yet'>
<col class='available'>
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Leave Type</th>
<th>Carried Over</th>
<th>Earned</th>
<th>Used</th>
<th>Scheduled</th>
<th>Balance</th>
<th>Yet Earned</th>
<th>Avaliable</th>
</tr>
</thead>
<!--
|[<tbody> (Required)
Instead of using a whole new <table> and shoving it
inside of a <td>, use a <tbody>. <tbody> is semantically,
logically, and aesthetically a superior choice
compared to a nested <table>.
<tbody> is one of the 3 major sections of a <table>
and it's the only one of those 3 (the other 2 are
<thead> and <tfoot>) that are actually required when
building a <table>. Although one can build a <table>
and neglect adding the <tbody>, all modern browsers
will add it in automatically. Another unique character
istic of <tbody> that the other 2 lacks is that we
can have multiple <tbody> in a <table>.
-->
<!--| Each <tbody> represents an employee's leave data
The class is .full (fulltime employee) or .part
(parttime employee). The id is the employee's
first initial, last name, and ID number.
-->
<tbody class='full' id='e-hunt-40318'>
<tr>
<!--| The first column comprises of <th>:
- Data: Employee's Full Name
- Class: .part or .full
- Style: From col.name
- Markup: <th> one row if th.part; 3 rows if th.full
by using the rowspan attribute.
-->
<th rowspan='3'>
<!--| <label>s toggle the radio buttons and the radio
buttons toggle row highlighting.
-->
<label for='rad1' class='on'>Ethan Hunt</label>
<label for='reset' class='reset'>Ethan Hunt</label>
</th>
<td>Vacation</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Illness</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Training</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
</tbody>
<tbody class='part' id='l-craft-61232'>
<tr>
<th>
<label for='rad2' class='on'>Lara Craft</label>
<label for='reset' class='reset'>Lara Craft</label>
</th>
<td>Training</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
</tbody>
<tbody class='full' id='r-hertz-20663'>
<tr>
<th rowspan='3'>
<label for='rad3' class='on'>Richard Hertz</label>
<label for='reset' class='reset'>Richard Hertz</label>
</th>
<td>Vacation</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Illness</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
<tr>
<td>Training</td>
<td>10</td>
<td>20</td>
<td>20</td>
<td>5</td>
<td>0</td>
<td>10</td>
<td>5</td>
</tr>
</tbody>
<!--<label for='id'> (Optional)
|[<label for='id'></label> <input id='id' type='radio'>
<tfoot> contains the <label>s that toggle the
columns' highlighting. Note that each <label>
has a for attribute which value is the id of
the checkbox that the <label> is associated with.
This association allows the hidden <input>s
to react from any click on it's associated
<label>
-->
<tfoot>
<tr>
<td>
<label for='chx1'>COL1</label>
</td>
<td>
<label for='chx2'>COL2</label>
</td>
<td>
<label for='chx3'>COL3</label>
</td>
<td>
<label for='chx4'>COL4</label>
</td>
<td>
<label for='chx5'>COL5</label>
</td>
<td>
<label for='chx6'>COL6</label>
</td>
<td>
<label for='chx7'>COL7</label>
</td>
<td>
<label for='chx8'>COL8</label>
</td>
<td>
<label for='chx9'>COL9</label>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
Try this one.
I give table-fixed. and fixed with of TH.
The whole code is below;
.report-table {
border-collapse: collapse;
width: 100%;
font-family: Arial;
}
.report-table .col-name {
width: 150px;
}
.report-table .col-title {
width: 150px;
}
.report-table .col-carried {
width: 60px;
}
.report-table .col-earned {
width: 60px;
}
.report-table .col-used {
width: 60px;
}
.report-table .col-scheduled {
width: 60px;
}
.report-table .col-balance {
width: 60px;
}
.report-table .col-to-be {
width: 60px;
}
.report-table .col-available {
width: 60px;
}
.report-table .inner-table tr td{
border: 0;
}
.report-table.hr-table .inner-table {
background: none;
border: 0;
}
.report-table.hr-table .inner-table td {
vertical-align: top;
}
.report-table.hr-table tr {
border-top: 1px solid #333;
}
.report-table.hr-table td,
.report-table.hr-table th{
vertical-align: top;
text-align: left;
}
.report-table.hr-table .inner-table td:first-child {
padding-left: 0;
}
.col-title{width:100px !important}
table{table-layout:fixed;border-collapse:collapse}
table table{width:100%}
<table class="tablesorter hr-table hr-table-striped report-table">
<thead>
<tr>
<th class="header col-name">Name<span></span></th>
<th class="header col-title">Leave Title<span></span></th>
<th class="header col-carried">Carried Over<span></span></th>
<th class="header col-earned">Earned<span></span></th>
<th class="header col-used">Used <span></span></th>
<th class="header col-scheduled">Scheduled <span></span></th>
<th class="header col-balance">Balance<span></span></th>
<th class="header col-to-be">To-be-earned<span></span></th>
<th class="header col-available">Avaliable<span></span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-name">Ethan Hunt</td>
<td colspan="8">
<table class=" hr-table inner-table">
<tr>
<td class="col-title">Vacation</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Sickness</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Training</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="col-name">Lara Craft</td>
<td class="col-title">Training</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-name">Ethan Hunt</td>
<td colspan="8">
<table class=" hr-table inner-table">
<tr>
<td class="col-title">Vacation</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Sickness</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Training</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Try this just set width for .inner-table td.
.report-table {
border-collapse: collapse;
width: 100%;
font-family: Arial;
}
.report-table .col-name {
width: 150px;
}
.report-table .col-title {
width: 150px;
}
.report-table .col-carried {
width: 60px;
}
.report-table .col-earned {
width: 60px;
}
.report-table .col-used {
width: 60px;
}
.report-table .col-scheduled {
width: 60px;
}
.report-table .col-balance {
width: 60px;
}
.report-table .col-to-be {
width: 60px;
}
.report-table .col-available {
width: 60px;
}
.report-table .inner-table tr td{
border: 0;
}
.report-table.hr-table .inner-table {
background: none;
border: 0;
}
.report-table.hr-table .inner-table td {
vertical-align: top;
}
.report-table.hr-table tr {
border-top: 1px solid #333;
}
.report-table.hr-table td,
.report-table.hr-table th{
padding: 10px;
vertical-align: top;
text-align: left;
}
.report-table.hr-table .inner-table td:first-child {
padding-left: 0;
width: 10%;
}
<table class="tablesorter hr-table hr-table-striped report-table">
<thead>
<tr>
<th class="header col-name">Name<span></span></th>
<th class="header col-title">Leave Title<span></span></th>
<th class="header col-carried">Carried Over<span></span></th>
<th class="header col-earned">Earned<span></span></th>
<th class="header col-used">Used <span></span></th>
<th class="header col-scheduled">Scheduled <span></span></th>
<th class="header col-balance">Balance<span></span></th>
<th class="header col-to-be">To-be-earned<span></span></th>
<th class="header col-available">Avaliable<span></span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-name">Ethan Hunt</td>
<td colspan="8">
<table class=" hr-table inner-table">
<tr>
<td class="col-title">Vacation</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Sickness</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Training</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="col-name">Lara Craft</td>
<td class="col-title">Training</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-name">Ethan Hunt</td>
<td colspan="8">
<table class=" hr-table inner-table">
<tr>
<td class="col-title">Vacation</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Sickness</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
<tr>
<td class="col-title">Training</td>
<td class="col-carried">10</td>
<td class="col-earned">20</td>
<td class="col-used">20</td>
<td class="col-scheduled">5</td>
<td class="col-balance">0</td>
<td class="col-to-be">10</td>
<td class="col-available">5</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
I have a complicated set of table rows with colspans and rowspans all over the shop. All works fine except for the bottom row in Internet Explorer which forces it's height to be the same as the previous row, which is set to rowspan="2". How can I fix this?
Also, the layout needs to be a table because a PDF generator uses it and that requires tables. Ideally the HTML layout wouldn't change at all, but it can change if it needs to.
Below is the code. Look at it in Google Chrome to see how it should be displaying in IE.
.MhrPayslipDetail {
display: block;
font-family: sans-serif;
font-size: 16px;
padding: 20px 60px;
text-align: center;
}
.MhrPayslipDetail-payslip {
background-color: #fff;
border-collapse: separate;
border-spacing: 10px;
width: 100%;
}
.MhrPayslipDetail-label {
background-color: #c1c1c1;
border: 1px solid #c1c1c1;
border-radius: 5px;
font-weight: bold;
padding: 4px;
text-align: left;
vertical-align: middle;
}
.MhrPayslipDetail-cell,
.MhrPayslipDetail-cellRight {
background-color: #fff;
border: 1px solid #c1c1c1;
border-radius: 5px;
padding: 4px;
text-align: left;
vertical-align: middle;
}
.MhrPayslipDetail-cellRight {
text-align: right;
}
.MhrPayslipDetail-list {
border: 0;
border-collapse: collapse;
width: 100%;
}
.MhrPayslipDetail-listCell,
.MhrPayslipDetail-listLabel,
.MhrPayslipDetail-listCellHeader {
border: 0;
padding: 1px;
text-align: left;
vertical-align: middle;
}
.MhrPayslipDetail-listCellRight,
.MhrPayslipDetail-listCellHeaderRight {
border: 0;
padding: 1px;
text-align: right;
vertical-align: middle;
}
.MhrPayslipDetail-listLabel,
.MhrPayslipDetail-listCellHeader {
font-weight: bold;
width: 50%;
}
.MhrPayslipDetail-details {
font-size: .9em;
}
.MhrPayslipDetail-paymentsDetails,
.MhrPayslipDetail-deductionsDetails {
height: 21em;
vertical-align: top;
}
.MhrPayslipDetail-thisPeriodDetails,
.MhrPayslipDetail-yearToDateDetails {
height: 10em;
vertical-align: top;
}
<div class="MhrPayslipDetail">
<table class="MhrPayslipDetail-payslip">
<tbody>
<tr>
<td colspan="3" rowspan="3" class="MhrPayslipDetail-cell MhrPayslipDetail-paymentsDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<thead>
<tr>
<th class="MhrPayslipDetail-listCellHeader">Description</th>
<th class="MhrPayslipDetail-listCellHeaderRight">U/T</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Rate</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Test Basic Pay</td>
<td class="MhrPayslipDetail-listCellRight"></td>
<td class="MhrPayslipDetail-listCellRight"></td>
<td class="MhrPayslipDetail-listCellRight">200.00</td>
</tr>
</tbody>
</table>
</td>
<td colspan="2" rowspan="3" class="MhrPayslipDetail-cell MhrPayslipDetail-deductionsDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<thead>
<tr>
<th class="MhrPayslipDetail-listCellHeader">Description</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Tax</td>
<td class="MhrPayslipDetail-listCellRight">25.40</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">NI</td>
<td class="MhrPayslipDetail-listCellRight">24.00</td>
</tr>
</tbody>
</table>
</td>
<td colspan="2" class="MhrPayslipDetail-cell MhrPayslipDetail-thisPeriodDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<thead>
<tr>
<th class="MhrPayslipDetail-listCellHeader">Description</th>
<th class="MhrPayslipDetail-listCellHeaderRight">Cash</th>
</tr>
</thead>
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Taxable Pay</td>
<td class="MhrPayslipDetail-listCellRight">200.00</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Employers National Insurance</td>
<td class="MhrPayslipDetail-listCellRight">27.60</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Niable Pay</td>
<td class="MhrPayslipDetail-listCellRight">200.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th colspan="2" class="MhrPayslipDetail-label">Year-to-date</th>
</tr>
<tr>
<td colspan="2" rowspan="2" class="MhrPayslipDetail-cell MhrPayslipDetail-yearToDateDetails">
<table class="MhrPayslipDetail-details MhrPayslipDetail-list">
<tbody>
<tr>
<td class="MhrPayslipDetail-listCell">Taxable Pay</td>
<td class="MhrPayslipDetail-listCellRight">7,200.00</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">NI</td>
<td class="MhrPayslipDetail-listCellRight">622.08</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Tax</td>
<td class="MhrPayslipDetail-listCellRight">25.40</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Niable Pay</td>
<td class="MhrPayslipDetail-listCellRight">7,200.00</td>
</tr>
<tr>
<td class="MhrPayslipDetail-listCell">Employers National Insurance</td>
<td class="MhrPayslipDetail-listCellRight">713.73</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<th class="MhrPayslipDetail-label">Payments</th>
<td class="MhrPayslipDetail-cellRight" colspan="2">200.00</td>
<th class="MhrPayslipDetail-label">Deductions</th>
<td class="MhrPayslipDetail-cellRight">49.40</td>
</tr>
</tbody>
</table>
</div>
UPDATE
Since submitting this question I have tried using sub-tables to separate out the columns, however I found that when I did that I wasn't able to get them to line up correctly due to border spacing and the PDF generator's lack of being able to use border-collapse:collapse;.
As an FYI, this is the PDF generator the system is using.
JSFiddle
I tried every way I could think of to clear this gap but still without success. I also tried to set padding = 0 but the gap's still there too. If i zoom out, the gap will disapper, can't figure out why!
This is the css for the last td tag (the blue rows which creates the gap) :
.tdtieudecuoi{
text-align:left;
background-color: #80A5CE;
color: #FFF;
font-weight: bold;
padding:0;
}
In your thkqgiai element add the border-top attribute as follows...
.thkqgiai{
width:20% !important;
text-align:center;
color:white;
background-color: #910000;
border-top:1px solid #910000;
}
And in the TD attributes add the following to border attributes...
border-bottom:1px solid #80A5CE;
border-right:1px solid #80A5CE;
Instead of line-height you can use height:
body {
padding: 0;
}
table,
th,
td,
tr {
border-collapse: collapse;
}
.tb {
width: 500px;
}
.tb td {
/*line-height: 25px;remove line height*/
font-size: 13px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
height: 25px;/*add height*/
}
.tb th {
padding: 5px;/*increase padding to 5px*/
}
/*2 cell đầu tiên, xác định độ rộng*/
.tdkq,
.tddd {
padding: 0;
}
.tdkq {
width: 70%;
vertical-align: top;
}
.tddd {
width: 30%;
vertical-align: top;
}
/*bảng kết quả và đầu đuôi*/
.tbkq {
width: 100%;
word-wrap: break-word;
table-layout: fixed;
float: left;
margin-bottom: 0;
padding-bottom: 0;
border-right: 1px solid #CCC;
}
.tbdd {
width: 100%;
}
.tbdd td {
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
}
/*cột giải và kết quả của bảng kết quả*/
.trkq {
width: 100%;
}
.thkqgiai {
width: 20% !important;
text-align: center;
color: white;
background-color: #910000;
}
.thkqso {
width: 80% !important;
color: #CC3F51;
font-weight: bold;
font-size: 16px;
text-align: center !important;
background-color: #FFF;
}
.tdkqgiai {
text-align: center;
background-color: #F9F9F9;
color: #910000;
}
.tdkqgiaidb {
text-align: center;
color: white;
background-color: #910000;
}
.tdkqso {
text-align: center;
word-wrap: break-word !important;
border-top: 1px solid #CCC;
}
.tdkqsodb {
text-align: center;
word-wrap: break-word !important;
color: red;
border-top: 1px solid #CCC;
}
/*cột đầu và đuôi của bảng đầu đuôi*/
.thdddau {
width: 30%;
color: white;
background-color: #910000;
}
.thddduoi {
width: 70%;
color: white;
background-color: #910000;
}
/*tiêu đề cho bảng kq*/
.tieudemien {
line-height: 24px;
background-color: #80A5CE;
text-transform: uppercase;
color: #FFF;
font-weight: bold;
font-size: 12px;
width: 500px;
margin-bottom: 0;
padding-bottom: 0;
}
.tdtieudecuoi {
text-align: left;
background-color: #80A5CE;
color: #FFF;
font-weight: bold;
padding: 0;
}
<div id="body_content">
<br />
<h2 class="tieudemien"> Kết quả xổ số Miền Nam ngày 02-11-2014 (Chủ nhật)</h2>
<table class="tb">
<tbody>
<tr>
<td class="tdkq">
<table class="tbkq">
<tbody>
<tr class="trkq">
<th class="thkqgiai">Giải</th>
<th class="thkqso">Kiên Giang</th>
</tr>
<tr>
<td class="tdkqgiai">Đặc biệt</td>
<td class="tdkqsodb">048674</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhất</td>
<td class="tdkqso">38463</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhì</td>
<td class="tdkqso">37309</td>
</tr>
<tr>
<td class="tdkqgiai">Giải ba</td>
<td class="tdkqso">20091-22416</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bốn</td>
<td class="tdkqso">28539-63139-58063-48935-41701-02723-41398</td>
</tr>
<tr>
<td class="tdkqgiai">Giải năm</td>
<td class="tdkqso">1102</td>
</tr>
<tr>
<td class="tdkqgiai">Giải sáu</td>
<td class="tdkqso">5373-2976-4875</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bảy</td>
<td class="tdkqso">551</td>
</tr>
<tr>
<td class="tdkqgiai">Giải tám</td>
<td class="tdkqso">50</td>
</tr>
<tr>
<td class="tdtieudecuoi"></td>
<td class="tdtieudecuoi">Xem kết quả trực tiếp tại iKetqua.net</td>
</tr>
</tbody>
</table>
</td>
<td class="tddd">
<table class="tbdd">
<tbody>
<tr class="trkq">
<th class="thdddau">Đầu</th>
<th class="thddduoi">Đuôi</th>
</tr>
<tr>
<td class="tdkqgiai">0</td>
<td class="tdkqso">9,1,2</td>
</tr>
<tr>
<td class="tdkqgiai">1</td>
<td class="tdkqso">6</td>
</tr>
<tr>
<td class="tdkqgiai">2</td>
<td class="tdkqso">3</td>
</tr>
<tr>
<td class="tdkqgiai">3</td>
<td class="tdkqso">9,9,5</td>
</tr>
<tr>
<td class="tdkqgiai">4</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">5</td>
<td class="tdkqso">1,0</td>
</tr>
<tr>
<td class="tdkqgiai">6</td>
<td class="tdkqso">3,3</td>
</tr>
<tr>
<td class="tdkqgiai">7</td>
<td class="tdkqso">4,3,6,5</td>
</tr>
<tr>
<td class="tdkqgiai">8</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">9</td>
<td class="tdkqso">1,8</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="tb">
<tbody>
<tr>
<td class="tdkq">
<table class="tbkq">
<tbody>
<tr class="trkq">
<th class="thkqgiai">Giải</th>
<th class="thkqso">Lâm Đồng</th>
</tr>
<tr>
<td class="tdkqgiai">Đặc biệt</td>
<td class="tdkqsodb">090431</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhất</td>
<td class="tdkqso">54958</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhì</td>
<td class="tdkqso">64035</td>
</tr>
<tr>
<td class="tdkqgiai">Giải ba</td>
<td class="tdkqso">24934-62958</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bốn</td>
<td class="tdkqso">93752-22930-27309-04977-91008-21818-94007</td>
</tr>
<tr>
<td class="tdkqgiai">Giải năm</td>
<td class="tdkqso">2336</td>
</tr>
<tr>
<td class="tdkqgiai">Giải sáu</td>
<td class="tdkqso">0075-8638-4023</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bảy</td>
<td class="tdkqso">204</td>
</tr>
<tr>
<td class="tdkqgiai">Giải tám</td>
<td class="tdkqso">61</td>
</tr>
<tr>
<td class="tdtieudecuoi"></td>
<td class="tdtieudecuoi">Xem kết quả trực tiếp tại iKetqua.net</td>
</tr>
</tbody>
</table>
</td>
<td class="tddd">
<table class="tbdd">
<tbody>
<tr class="trkq">
<th class="thdddau">Đầu</th>
<th class="thddduoi">Đuôi</th>
</tr>
<tr>
<td class="tdkqgiai">0</td>
<td class="tdkqso">9,8,7,4</td>
</tr>
<tr>
<td class="tdkqgiai">1</td>
<td class="tdkqso">8</td>
</tr>
<tr>
<td class="tdkqgiai">2</td>
<td class="tdkqso">3</td>
</tr>
<tr>
<td class="tdkqgiai">3</td>
<td class="tdkqso">1,5,4,0,6,8</td>
</tr>
<tr>
<td class="tdkqgiai">4</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">5</td>
<td class="tdkqso">8,8,2</td>
</tr>
<tr>
<td class="tdkqgiai">6</td>
<td class="tdkqso">1</td>
</tr>
<tr>
<td class="tdkqgiai">7</td>
<td class="tdkqso">7,5</td>
</tr>
<tr>
<td class="tdkqgiai">8</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">9</td>
<td class="tdkqso"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="tb">
<tbody>
<tr>
<td class="tdkq">
<table class="tbkq">
<tbody>
<tr class="trkq">
<th class="thkqgiai">Giải</th>
<th class="thkqso">Tiền Giang</th>
</tr>
<tr>
<td class="tdkqgiai">Đặc biệt</td>
<td class="tdkqsodb">545150</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhất</td>
<td class="tdkqso">78387</td>
</tr>
<tr>
<td class="tdkqgiai">Giải nhì</td>
<td class="tdkqso">06256</td>
</tr>
<tr>
<td class="tdkqgiai">Giải ba</td>
<td class="tdkqso">39415-15189</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bốn</td>
<td class="tdkqso">90260-01471-58016-40732-68891-50834-93561</td>
</tr>
<tr>
<td class="tdkqgiai">Giải năm</td>
<td class="tdkqso">3390</td>
</tr>
<tr>
<td class="tdkqgiai">Giải sáu</td>
<td class="tdkqso">1556-3656-4176</td>
</tr>
<tr>
<td class="tdkqgiai">Giải bảy</td>
<td class="tdkqso">016</td>
</tr>
<tr>
<td class="tdkqgiai">Giải tám</td>
<td class="tdkqso">23</td>
</tr>
<tr>
<td class="tdtieudecuoi"></td>
<td class="tdtieudecuoi">Xem kết quả trực tiếp tại iKetqua.net</td>
</tr>
</tbody>
</table>
</td>
<td class="tddd">
<table class="tbdd">
<tbody>
<tr class="trkq">
<th class="thdddau">Đầu</th>
<th class="thddduoi">Đuôi</th>
</tr>
<tr>
<td class="tdkqgiai">0</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">1</td>
<td class="tdkqso">5,6,6</td>
</tr>
<tr>
<td class="tdkqgiai">2</td>
<td class="tdkqso">3</td>
</tr>
<tr>
<td class="tdkqgiai">3</td>
<td class="tdkqso">2,4</td>
</tr>
<tr>
<td class="tdkqgiai">4</td>
<td class="tdkqso"></td>
</tr>
<tr>
<td class="tdkqgiai">5</td>
<td class="tdkqso">0,6,6,6</td>
</tr>
<tr>
<td class="tdkqgiai">6</td>
<td class="tdkqso">0,1</td>
</tr>
<tr>
<td class="tdkqgiai">7</td>
<td class="tdkqso">1,6</td>
</tr>
<tr>
<td class="tdkqgiai">8</td>
<td class="tdkqso">7,9</td>
</tr>
<tr>
<td class="tdkqgiai">9</td>
<td class="tdkqso">1,0</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Check my comments in css.
This is a rounding anomaly. It is a bad idea to use an inner table. You should use one big table instead, something like this:
.datatable {
border-collapse: collapse;
}
.datatable td {
border: 1px solid #CCCCCC;
font-weight: bold;
line-height: 25px;
padding: 3px;
}
.datatable .noborder {
border: hidden;
}
.datatable .titlecell {
color: #FFFFFF;
background-color: #80A5CE;
}
.datatable .subtitlehead {
background-color: #910000;
}
.datatable .subtitlecell {
color: #CE4859;
}
.datatable .maincolcell {
color: #910000;
}
.datatable .red {
color: #FF0000;
}
<table class="datatable">
<tr>
<td colspan="4" class="titlecell noborder">Kết quả xổ số Miền Nam ngày 02-11-2014 (Chủ nhật)</td>
</tr>
<tr>
<td class="subtitlehead">Giải</td>
<td class="subtitlecell">Kiên Giang</td>
<td class="subtitlehead">Đầu</td>
<td class="subtitlehead">Đuôi</td>
</tr>
<tr>
<td class="maincolcell">Đặc biệt</td>
<td class="red">048674</td>
<td class="maincolcell">0</td>
<td>9,1,2</td>
</tr>
<tr>
<td class="maincolcell">Giải nhất</td>
<td>38463</td>
<td class="maincolcell">1</td>
<td>6</td>
</tr>
<tr>
<td class="maincolcell">Giải nhì</td>
<td>37309</td>
<td class="maincolcell">2</td>
<td>3</td>
</tr>
<tr>
<td class="maincolcell">Giải ba</td>
<td>20091-22416</td>
<td class="maincolcell">3</td>
<td>9,9,5</td>
</tr>
<tr>
<td class="maincolcell">Giải bốn</td>
<td>28539-63139-58063-48935-41701-02723-41398</td>
<td class="maincolcell">4</td>
<td></td>
</tr>
<tr>
<td class="maincolcell">Giải năm</td>
<td>1102</td>
<td class="maincolcell">5</td>
<td>1,0</td>
</tr>
<tr>
<td class="maincolcell">Giải sáu</td>
<td>5373-2976-4875</td>
<td class="maincolcell">6</td>
<td>3,3</td>
</tr>
<tr>
<td class="maincolcell">Giải bảy</td>
<td>551</td>
<td class="maincolcell">7</td>
<td>4,3,6,5</td>
</tr>
<tr>
<td class="maincolcell">Giải tám</td>
<td>50</td>
<td class="maincolcell">8</td>
<td></td>
</tr>
<tr>
<td class="titlecell noborder"></td>
<td class="titlecell noborder">Xem kết quả trực tiếp tại iKetqua.net</td>
<td class="maincolcell">9</td>
<td>1,8</td>
</tr>
<tr>
<td class="subtitlehead">Giải</td>
<td class="subtitlecell">Lâm Đồng</td>
<td class="subtitlehead">Đầu</td>
<td class="subtitlehead">Đuôi</td>
</tr>
<tr>
<td colspan="4">and so on…</td>
</tr>
</table>