html表中的列数

时间:2016-07-07 00:02:15

标签: html css

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

enter image description here

我无法理解为什么我当前的实现不会产生我想要的结果。正如您在代码段中看到的那样,第二个<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>的宽度我想知道为什么我当前的实现不起作用。

3 个答案:

答案 0 :(得分:3)

实际上第二个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>

答案 1 :(得分:0)

您可以使用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>

答案 2 :(得分:-1)

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