Html 为什么 colspan 没有按预期应用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9257308/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is colspan not applied as expected
提问by Nicsoft
I have a table according to below. The second row has defined three columns, one with colspan=8and the others with colspan=1. Still, the cells are not stretched according to the colspan, the "width" are a little bit more for second cell and widest for the third.
我有一张如下表。第二行定义了三列，一列是 ，colspan=8其他列是colspan=1。尽管如此，单元格不会根据 colspan 拉伸，第二个单元格的“宽度”多一点，第三个单元格的“宽度”最宽。
<table class="floating simpletable">
<tbody>
<tr><td colspan="10">1st row</td></tr>
<tr><td colspan="8">Column 1 -> Least wide</td><td colspan="1">2nd</td><td colspan="1">3rd</td></tr>
<tr><td colspan="10">3rd row</td></tr>
<tr><td colspan="1">1st cell</td><td colspan="9">4th row</td></tr>
</tbody>
</table>
What's the problem and how to fix it?
有什么问题以及如何解决？
回答by Jukka K. Korpela
The widths of cells depend on cell contents, HTML and CSS settings for widths, browser, and possibly phase of the moon. The colspanattribute just specifies how many columns (hence, how many slots in the grid for the table) a cell occupies.
单元格的宽度取决于单元格内容、宽度的 HTML 和 CSS 设置、浏览器以及可能的月相。该colspan属性仅指定单元格占据多少列（因此，表格网格中有多少个插槽）。
If you see the last cell of row 2 as the widest, then the reason is probably that it has most contents (or there is a width setting for it). Your demo code does not demonstrate such behavior.
如果您看到第 2 行的最后一个单元格最宽，那么原因可能是它的内容最多（或者有宽度设置）。您的演示代码未演示此类行为。
If you don't want the column widths adjust to the size requirements of cells, set the widths explicitly in CSS (or in HTML). Before this, it is best to remove all unnecessary complications from the table structure. If your demo code reflects the entire structure, then columns 2 through 8 are an unnecessary division, i.e. they could be turned to a single column. Demonstration (with poor-style pixel widths just for definiteness):
如果您不想根据单元格的大小要求调整列宽，请在 CSS（或 HTML）中明确设置宽度。在此之前，最好从表结构中删除所有不必要的复杂性。如果您的演示代码反映了整个结构，则第 2 列到第 8 列是不必要的划分，即它们可以变成单个列。演示（使用糟糕的像素宽度只是为了确定）：
<table class="floating simpletable" border>
<col width=100><col width=100><col width=100>
<tbody>
<tr><td colspan="4">1st row</td></tr>
<tr><td colspan="2">span 1</td><td>span 2</td><td>span 3 </td></tr>
<tr><td colspan="4">3rd row</td></tr>
<tr><td>span</td><td colspan="3">other span</td></tr>
</tbody>
</table>
Without a rewrite like this, I'm afraid your table violates the table model of HTML, as currently there is no cell that starts in column 3 or column 4 or...
如果没有这样的重写，恐怕您的表格违反了 HTML 的表格模型，因为目前没有从第 3 列或第 4 列或...
回答by Quentin
colspandetermines how many columns a cell overlaps, not the size of those columns. Use the CSS widthproperty to specify the width of things.
colspan确定单元格重叠的列数，而不是这些列的大小。使用 CSSwidth属性来指定事物的宽度。
