我正在尝试创建以下html表:
我无法理解为什么我当前的实现不会产生我想要的结果。正如您在代码段中看到的那样,第二个<td>
中的最后一个<tr>
跨越2个列,而不是中间<td>
。
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;
在研究中,我发现了以下内容:https://www.w3.org/TR/WD-html40-970917/struct/tables.html
有几种方法可以确定列数:
计算COL和COLGROUP元素指定的列数,这些列只能出现在表的开头(在 可选的CAPTION)。
依次扫描每一行以计算每行所需的列数,同时考虑跨越多行的单元格和/或 列。将表的列数设置为最大值 每行的列数。对于任何小于此的行 列数,该行的末尾应填充为空 细胞。 &#34;结束&#34;一行取决于表格的方向性。
[不建议使用]在TABLE元素上使用cols属性。这是最弱的方法,因为它没有提供任何其他信息 列宽。但是,如果作者使用样式,这可能无关紧要 工作表以指定宽度。
那么我对这个功能有什么误解?
请注意,我知道我可以使用css专门设置<td>
的宽度我想知道为什么我当前的实现不起作用。
答案 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
两个选项:
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>
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;}