你可以看到我试图得到这个输出.
提前致谢
.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 > <thead> <tr> <th >name<span></span></th> <th >Leave Title<span></span></th> <th >CarrIEd Over<span></span></th> <th >Earned<span></span></th> <th >Used <span></span></th> <th >Scheduled <span></span></th> <th >Balance<span></span></th> <th >To-be-earned<span></span></th> <th >Avaliable<span></span></th> </tr> </thead> <tbody> <tr> <td ><a href="#">Ethan Hunt</a></td> <td colspan="8"> <table > <tr> <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 >Sickness</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> </table> </td> </tr> <tr> <td ><a href="#">Lara Craft</a></td> <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> <tr> <td ><a href="#">Ethan Hunt</a></td> <td colspan="8"> <table > <tr> <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 >Sickness</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> </table> </td> </tr> </tbody></table>
这是JSFIDDLE
解决方法 任何嵌套表都会使所涉及的所有表的整个布局和功能复杂化. < tbody>创建元素是为了允许我们将表格划分为共享相同精确列的部分.引入具有相同类型数据的另一个表并将其推入一列是没有意义的.将它包装在< table>中没有任何好处.然后将元素保存在另一个表的一列中,嵌套的< table>中的所有单元格仍然受内在< table>的风格和行为的影响.只有名称列的一列被拉伸,以便与外部< table>的列对齐.没有意义.Plunker
详细信息在演示中得到了广泛的评论.虽然响应(最低限度),但最好以全页模式查看
演示
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 > <!--|[<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>总结
以上是内存溢出为你收集整理的html – 表列的对齐方式全部内容，希望文章能够帮你解决html – 表列的对齐方式所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）