如何将HTML表的列宽设置为百分比(不影响表体的表页脚)

Question

我真的很难理解如何在HTML表中设置列宽样式。我无法理解为什么百分比宽度不适用，以及为什么tfoot内的列会影响tbody中的列宽。

有人能阐明这一点吗？也许可以解释一下我如何将tbody中的列设置为三分之一(33.333%(，将tfoot中的列设为二分之一(50%(，并实际跨越表的整个宽度(现在它们只跨越上面的2列，而不是3列(？

如有任何帮助/指导，我们将不胜感激。

tbody,
tfoot {
width: 100%;
}
tbody tr td {
width: 33.333%;
}
tfoot tr th, 
tfoot tr td {
width: 50%;
}

<table border="1">
<tbody>
<tr>
<td>Body Row 1 Column 1</td>
<td>Body Row 1 Column 2</td>
<td>Body Row 1 Column 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Footer Row 1 Column 1</th>
<td>Footer Row 1 Column 2</td>
</tr>
<tr>
<th>Footer Row 2 Column 1</th>
<td>Footer Row 2 Column 2</td>
</tr>
<tr>
<th>Footer Row 3 Column 1</th>
<td>Footer Row 3 Column 2</td>
</tr>
</tfoot>
</table>

Answer 1

如果您没有受到限制，因此可以使用一个表，为什么不只使用表中的表呢？

<tfoot>
<tr>
<td colspan="3">
<table>
<tbody>
<tr>
<td>First half</td>
<td>Second half</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tfoot>

只要确保样式同样适用，并提供table table { width: 100%; }，没有边框、边距、填充等。
我发现最好的解决方案是那些忽略问题的解决方案。