Html colspan 宽度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5373893/
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
colspan width issue
提问by pstanton
I'm having trouble setting fixed widths on columns which use colspan.
我在使用colspan.
It seems that neither IE8, Firefox or Chrome can figure out how to correctly size columns with colspan.
似乎 IE8、Firefox 或 Chrome 都无法弄清楚如何使用 colspan 正确调整列大小。
Try the following code to see the problem in action:
尝试以下代码以查看实际问题：
<h2>One table with colspans, incorrect cell dimensions</h2>
<table border="1">
<tr>
<td style="width:20px;">20</td>
<td style="width:50px;" colspan="2">50</td>
<td>a</td>
<td>a</td></tr>
<tr>
<td style="width:50px;" colspan="2">50</td>
<td style="width:20px;">20</td>
<td>a</td>
<td>a</td></tr>
</table>
<h2>Split tables, correct cell dimensions</h2>
<table border="1">
<tr>
<td style="width:20px;">20</td>
<td style="width:50px;">50</td>
<td>a</td>
<td>a</td></tr>
</table>
<table border="1">
<tr>
<td style="width:50px;">50</td>
<td style="width:20px;">20</td>
<td>a</td>
<td>a</td></tr>
</table>
Can anyone explain why this might be happening, and if there is a workaround.
谁能解释为什么会发生这种情况，以及是否有解决方法。
EDIT:
编辑：
have tried doctypes
尝试过文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
回答by Josh M.
Because your column widths are contradicting. In row 1 you have columns widths 20, 50/2; in row 2 you have column widths 50/2, 20.
因为你的列宽是矛盾的。在第 1 行，您的列宽为 20、50/2；在第 2 行，您的列宽为 50/2、20。
Row 1, Column 1 is defined as 20.
Row 1, Column 2 is defined as 50.
Row 2, Column 1 is defined as 50.
Row 2, Column 2 is defined as 20.
You can't have overlapping colspans of different widths, the table cells need to line up. You're trying to draw this table:
您不能有不同宽度的重叠 colspan，表格单元格需要对齐。您正在尝试绘制此表：
|-----|----------|
|----------|-----|
Which is not valid since the columns don't line up. In order to do this you need to add more columns:
这是无效的，因为列不对齐。为此，您需要添加更多列：
|-----|----.-----|
|-----.----|-----|
Where "." is a column that is hidden by the column span. Try this HTML:
在哪里 ”。” 是被列跨度隐藏的列。试试这个 HTML：
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
<table border="1" style="table-layout: fixed;">
<colgroup>
<col style="width: 20px;"/>
<col style="width: 30px;"/>
<col style="width: 20px;"/>
</colgroup>
<tbody>
<tr>
<td>20</td>
<td colspan="2">50</td>
</tr>
<tr>
<td colspan="2">50</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
回答by SynBiotik
It has to do with the way browsers calculate the widths for each column. Tables require more overhead because of their flexible nature and more than 1 pass depending on what dimensions you set and content.
它与浏览器计算每列宽度的方式有关。表格需要更多的开销，因为它们具有灵活的性质，并且根据您设置的维度和内容，可以通过 1 次以上。
To make a long story short, colspan on the first row when you want to set column widths on subsequent rows gums up the works. There are plenty of good ways to fix it, a bad way, however easy would be to have the very first row with 1 pixel of height setting the trend for the column widths.
长话短说，当您想在后续行上设置列宽时，在第一行上使用 colspan 会增加工作量。有很多好的方法可以修复它，一种不好的方法，但是很容易让具有 1 个像素高度的第一行设置列宽的趋势。
