colspan 宽度问题 [英] colspan width issue
问题描述
我在使用 colspan 的列上设置固定宽度时遇到问题.
I'm having trouble setting fixed widths on columns which use colspan.
IE8、Firefox 或 Chrome 似乎都无法弄清楚如何使用 colspan 正确调整列大小.
It seems that neither IE8, Firefox or Chrome can figure out how to correctly size columns with 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.
尝试过文档类型
<!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">
推荐答案
因为你的列宽是矛盾的.在第 1 行，您的列宽为 20、50/2；在第 2 行，您的列宽为 50/2、20.
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.
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.
不同宽度的colspans不能重叠，表格单元格需要对齐.您正在尝试绘制此表格:
You can't have overlapping colspans of different widths, the table cells need to line up. You're trying to draw this table:
|-----|----------|
|----------|-----|
这是无效的，因为列不对齐.为此，您需要添加更多列:
Which is not valid since the columns don't line up. In order to do this you need to add more columns:
|-----|----.-----|
|-----.----|-----|
."在哪里是被列跨度隐藏的列.试试这个 HTML:
Where "." is a column that is hidden by the column span. Try this 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>
这篇关于colspan 宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
