<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='report.css' rel='stylesheet'>
<style>
</style>
</head>
<body>
<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 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 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 class='full' id='e-hunt-40318'>
<tr>
<th rowspan='3'>
<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>
<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>
body,
html {
width: 100%;
height: 100%;
font: 400 100%/1.2 Arial
}
* {
margin: 0;
padding: 0;
border: 0
}
.report-table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
margin: 30px auto;
font-size: 1em
}
thead tr {
border-bottom: 3px double #111
}
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%
}
.chx,
.rad,
.reset {
display: none
}
label {
font: inherit;
cursor: pointer;
display: inline-block
}
#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
}
#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
}
Nested Table Column Alignment
=============================
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>` yet that one column that is just the name column is streched out in order to align to the column of the outer `<table>` makes no sense.
Provided in this Plunker are 2 versions of the same demo.
- index.html (Uncommented HTML)
- report.css (Uncommented CSS)
- detailed-index.html (Commented HTML)
- detailed-report.css (Commented CSS)
<!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>
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
}