html表中的列数

Question

我正在尝试创建以下html表：

我无法理解为什么我当前的实现不会产生我想要的结果。正如您在代码段中看到的那样，第二个<td>中的最后一个<tr>跨越2个列，而不是中间<td>。

＆＃13;

＆＃13;

table{
	width: 100%;
}
table tr td[colspan="4"]{
	font-size: 16px;
	text-align:center;
	background-color: #008CD1;
	color: #fff;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td colspan="4"><b>Nonverbal skills</b></td>
    </tr>
    <tr>
      <td>energised</td>
      <td colspan="2">Gestures</td>
      <td>Under energised</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

在研究中，我发现了以下内容：https://www.w3.org/TR/WD-html40-970917/struct/tables.html

  

有几种方法可以确定列数：

     

计算COL和COLGROUP元素指定的列数，这些列只能出现在表的开头（在   可选的CAPTION）。

     

依次扫描每一行以计算每行所需的列数，同时考虑跨越多行的单元格和/或   列。将表的列数设置为最大值   每行的列数。对于任何小于此的行   列数，该行的末尾应填充为空   细胞。 ＆＃34;结束＆＃34;一行取决于表格的方向性。

     

[不建议使用]在TABLE元素上使用cols属性。这是最弱的方法，因为它没有提供任何其他信息   列宽。但是，如果作者使用样式，这可能无关紧要   工作表以指定宽度。

那么我对这个功能有什么误解？

请注意，我知道我可以使用css专门设置<td>的宽度我想知道为什么我当前的实现不起作用。

Answer 1

实际上第二个td 确实跨越了两列，但是简单HTML表中列的宽度取决于表格单元格的内容。如果将包含宽度的以下样式属性添加到td，则它们的宽度将根据需要分配（即25/50/25％）： （注意：您可以/也应该将CSS类应用于那些td并为这些类创建外部CSS规则）

table{
	width: 100%;
}
table tr td[colspan="4"]{
	font-size: 16px;
	text-align:center;
	background-color: #008CD1;
	color: #fff;
}

<table>
  <tbody>
    <tr>
      <td colspan="4"><b>Nonverbal skills</b></td>
    </tr>
    <tr>
      <td style="width: 25%; background-color: #888;">energised</td>
      <td colspan="2" style="width: 50%; background-color: green;">Gestures</td>
      <td style="width: 25%; background-color: #888;">Under energised</td>
    </tr>
  </tbody>
</table>

Answer 2

您可以使用flexbox两个选项：

选项＃1

• 使用您当前的标记

table {
  width: 100%
}
tr {
  flex: 0 100%;
  display: flex
}
tr:first-of-type td {
  flex: 1;
  background: red;
  text-align: center
}
tr:last-of-type td:not(:nth-of-type(2n+1)) {
  flex: 2;
  background: lightgreen;
  text-align: center
}

<table>
  <tbody>
    <tr>
      <td><strong>Nonverbal skills</strong>
      </td>
    </tr>
    <tr>
      <td>energised</td>
      <td>Gestures</td>
      <td>Under energised</td>
    </tr>
  </tbody>
</table>

选项＃2

• 只有div s（更容易标记）

#wrap > div:first-of-type {
  flex: 0 100%;
  background: red;
  text-align: center
}
#wrap > div:last-of-type {
  display: flex;
  flex:0 100%
}
#wrap > div:last-of-type > div:not(:nth-of-type(2n+1)) {
  flex: 2;
  background: lightgreen;
  text-align: center
}

<div id="wrap">
  <div>
    <strong>Nonverbal skills</strong>
  </div>
  <div>
    <div>energised</div>
    <div>Gestures</div>
    <div>Under energised</div>
  </div>
</div>

Answer 3

 table.table td:nth-child(1) {text-align: center; font-weight: bold; width: 70px;}