html - Bootstrap 数据表 - 具有相同宽度的行的不同单元格数

Question

我有一个 bootstrap (3.3.7) 数据表，我想在所有 tds 上设置相同的宽度。最终，我想让所有包含 3 个单元格的行到达表格的右侧，并在每个单元格中保持相同的宽度。我进行了大量研究以找到类似的东西但失败了，所以对此的任何帮助将不胜感激。

下面是我目前的截图:

下面是我想将表格更改为:

.col-2 { width: 50%; }
.col-3 { width: 33.3%; }
.col-4 { width: 25%; }
.col-5 { width: 20%; }
.col-6 { width: 16.66666667%; }

table {
  margin-top: 50px;
}

thead tr th, td {
  text-align: center;
}

.td-parent {
  font-weight: bold;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">      
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th colspan="8">SPECIFICATION</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="td-parent" colspan="2">Part Number</td>
        <td class="td-parent" colspan="2">Position</td>
        <td class="td-parent" colspan="2">Content</td>
      </tr>
      <tr>
        <td class="td-child" colspan="2">CDR1005</td>
        <td class="td-child" colspan="2">Front/Rear</td>
        <td class="td-child" colspan="2">4 identical pads</td>
      </tr>
      <tr>
        <td class="td-parent col-4" colspan="2">Meritor</td>
        <td class="td-parent col-4" colspan="2">Mercedes</td>
        <td class="td-parent col-4" colspan="2">Renault</td>
        <td class="td-parent col-4" colspan="2">WVA</td>
      </tr>
      <tr>
        <td class="td-child" colspan="2">TBA</td>
        <td class="td-child" colspan="2">TBA</td>
        <td class="td-child" colspan="2">TBA</td>
        <td class="td-child" colspan="2">TBA</td>
      </tr>
      <tr>
        <td class="td-parent" colspan="2">A</td>
        <td class="td-parent" colspan="2">B</td>
        <td class="td-parent" colspan="2">C</td>
      </tr>
      <tr>
        <td class="td-child" colspan="2">250</td>
        <td class="td-child" colspan="2">118</td>
        <td class="td-child" colspan="2">28</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

1) 使用 colspan 让单元格占据整行

• 对于一行中的 3 列，使用 colspan = 4
• 对于一行中的 4 列，使用 colspan = 3

2) 使用table-layout: fixed 获得相等的宽度。

table-layout属性定义用于布置表的算法。如果未设置，大多数浏览器会将其值默认为 auto，其中宽度取决于内容。因此，单元格的宽度不相等。 但是，当您将此属性设置为 fixed 时，列宽由宽度而非内容决定。

table {
  margin-top: 50px;
  table-layout: fixed;
}

thead tr th, td {
  text-align: center;
  width: 1%;
}

.td-parent {
  font-weight: bold;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">      
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th colspan="12">SPECIFICATION</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="td-parent" colspan="4">Part Number</td>
        <td class="td-parent" colspan="4">Position</td>
        <td class="td-parent" colspan="4">Content</td>
      </tr>
      <tr>
        <td class="td-child" colspan="4">CDR1005</td>
        <td class="td-child" colspan="4">Front/Rear</td>
        <td class="td-child" colspan="4">4 identical pads</td>
      </tr>
      <tr>
        <td class="td-parent" colspan="3">Meritor</td>
        <td class="td-parent" colspan="3">Mercedes</td>
        <td class="td-parent" colspan="3">Renault</td>
        <td class="td-parent" colspan="3">WVA</td>
      </tr>
      <tr>
        <td class="td-child" colspan="3">TBA</td>
        <td class="td-child" colspan="3">TBA</td>
        <td class="td-child" colspan="3">TBA</td>
        <td class="td-child" colspan="3">TBA</td>
      </tr>
      <tr>
        <td class="td-parent" colspan="4">A</td>
        <td class="td-parent" colspan="4">B</td>
        <td class="td-parent" colspan="4">C</td>
      </tr>
      <tr>
        <td class="td-child" colspan="4">250</td>
        <td class="td-child" colspan="4">118</td>
        <td class="td-child" colspan="4">28</td>
      </tr>
    </tbody>
  </table>
</div>