html - 表格列的对齐方式

Question

我试图在表内创建表意味着嵌套表。现在它看起来像这样 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

Answer 1

任何嵌套表格都会使所有相关表格的整体布局和功能复杂化。 <tbody> element 的创建是为了让我们能够将一个表划分为多个部分，这些部分共享完全相同的列。引入另一个具有相同类型数据的表并将其塞入一列是没有意义的。将它包装在 <table> 中没有任何优势。元素然后将其保存在另一个表的一列中，嵌套 <table> 内的所有单元格仍然受制于内部的风格和行为<table> .只是名称列的一列被拉伸(stretch)以便与外部 <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, 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>