我试图让表内的表意味着嵌套表.现在看起来像这个
screenshot.但我需要从左边开始对齐.因为我在每一行都使用相同的计数列.
你可以看到我试图得到这个输出.
你可以看到我试图得到这个输出.
提前致谢
.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"><a href="#">Ethan Hunt</a></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"><a href="#">Lara Craft</a></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"><a href="#">Ethan Hunt</a></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>
这是JSFIDDLE
解决方法
任何嵌套表都会使所涉及的所有表的整个布局和功能复杂化. < TBODY>创建元素是为了允许我们将表格划分为共享相同精确列的部分.引入具有相同类型数据的另一个表并将其推入一列是没有意义的.将它包装在< table>中没有任何好处.然后将元素保存在另一个表的一列中,嵌套的< table>中的所有单元格仍然受内在< table>的风格和行为的影响.只有名称列的一列被拉伸,以便与外部< table>的列对齐.没有意义.
详细信息在演示中得到了广泛的评论.虽然响应(最低限度),但最好以全页模式查看
演示
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,.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>
