Question

我有一个简单的HTML表的示例，其中包含许多div块。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head></head>
<body>
  <table border=1 width="1000px" >
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr valign="top"><td colspan="1"  ><div style="width:180px;border: solid 1px black;">1</div></td><td colspan="3"  ><div style="width:770px;border: solid 1px black;">2</div></td></tr>
    <tr valign="top"><td colspan="4"  ><div style="width:960px;border: solid 1px black;">3</div></td></tr>
    <tr valign="top"><td colspan="2"  ><div style="width:475px;border: solid 1px black;">4</div></td><td colspan="2"  ><div style="width:475px;border: solid 1px black;">5</div></td></tr>
  </table>
</body>
</html>

问题是第2行的外观不正确。 colspans的行为不符合预期。如果我删除第四行，则第二行表现正确。

我知道div和CSS是可行的方法，但对于这个应用程序，目前这是不可能的。

Answer 1

您的问题是auto table layout。浏览器很难查看所有单元格，并计算每个单元格的宽度;当有colspans时，它是双重的（特别是在这个例子中，没有办法说明第3列和第4列应该有多宽）;当你是一个糟糕的老思维的Internet Explorer时，这是三倍难的，祝福。

不要让您的浏览器挣扎，喘息并慢慢渲染：使用fixed table-layout并准确地声明每列的宽度。通常，这将使用<col>元素完成：

#thing { width: 950px; table-layout: fixed; border-spacing: 0; }
#thing .wide { width: 295px; }
#thing .narrow { width: 180px; }
#thing.box { border: solid black 1px; }

<table id="thing">
    <col class="narrow" /><col class="wide" /><col class="wide" /><col class="narrow" />
    <tr>
        <td colspan="1"><div class="box">1</div></td>
        <td colspan="3"><div class="box">2</div></td>
    </tr>
    <tr>
        <td colspan="4"><div class="box">3</div></td>
    </tr>
    <tr>
        <td colspan="2"><div class="box">4</div></td>
        <td colspan="2"><div class="box">5</div></td>
    </tr>
</table>

但是，当该列中没有单个未扩展的单元格时，Webkit中存在忽略<col>宽度的错误。对于表来说这是非常不寻常的，但在上面的示例中就是这种情况：只有第一列包含未扩展的单元格。要解决此问题，您可以在开始时将<col>元素替换为哑行，并设置为具有最小高度：

#thing .cols td { height: 1px; line-height: 1px; font-size: 1px; }

<tr class="cols">
    <td class="narrow"></td><td class="wide"></td><td class="wide"></td><td class="narrow"></td>
</tr>

或者，有时不那么干扰，保留<col>并在底部添加一个哑行：

<tr class="cols"><td></td><td></td><td></td><td></td></tr>

Answer 2

我见过这种格式化的很多问题。您是否尝试过使用<col>？

例如，（我知道数字可能已关闭，但您可以根据需要进行调整）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head></head>
<body>
  <table border='1' width="1000px" style='border-collapse: collapse' >
    <col width='180' /><col width='180' /><col width='180' /><col width='180' />
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr valign="top"><td colspan="1"  ><div style="width:180px;border: solid 1px black;">1</div></td><td colspan="3"  ><div style="width:770px;border: solid 1px black;">2</div></td></tr>
    <tr valign="top"><td colspan="4"  ><div style="width:960px;border: solid 1px black;">3</div></td></tr>
    <tr valign="top"><td colspan="2"  ><div style="width:475px;border: solid 1px black;">4</div></td><td colspan="2"  ><div style="width:475px;border: solid 1px black;">5</div></td></tr>
  </table>
</body>
</html>

请参阅http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4.2了解详情

Answer 3

这是你的css与你的桌子宽度（或缺少桌面宽度）冲突的神器。

此代码定义第一行中的单元格宽度，然后使用css使被填充的div填充单元格：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
     td div {
          width:100%;
          border: solid 1px black;
     }
</style>
</head>

<body>
  <table border=1 width="1000px" >
    <tr><td width="18%">18%</td><td width="30%">30%</td><td width="26%">26%</td><td width="26%">26%</td></tr>
    <tr valign="top"><td colspan="1"  ><div>18%</div></td><td colspan="3"  ><div>82%</div></td></tr>
    <tr valign="top"><td colspan="4"  ><div>100%</div></td></tr>
    <tr valign="top"><td colspan="2"  ><div>48%</div></td><td colspan="2"  ><div>52%</div></td></tr>
  </table>
</body>
</html>

主要问题是你要为表格单元格中的div定义宽度，期望它们强制你的表格成形。实际上，你的第一个单元格（顶部的空单元格）没有定义的宽度，所以当你跨越那些未定义的宽度时，你得到更多未定义的宽度，然后你将一些大小的div鞋钉入其中。您可能应该将div设置为100％宽度，并调整单元格大小，或者只是设置单元格样式，从而消除divs altogther。

最重要的是，只使用css和div，没有桌子，但我明白这可能是一种挫败感，特别是如果你不熟悉css。

Answer 4

代码怎么没有按预期工作？我尝试了你的示例代码，它可以正常工作：表中有4列;第一行是空的，第二行有两列，一列是大，一列是短，第三行有一列跨越整个表，第四行有2列。

我应该指出表中的div不一定与它们所在列的宽度相匹配。这是因为计算表列宽度的方式：表具有固定宽度（1000px）。列分布在这1000个像素内，以最适合包含的数据。

第1行没有说明列宽。
第2行表示column1必须至少为180px，而第2列+3 + 4列必须至少为770px。
第3行表示第1 + 2 + 3 + 4列必须至少为960px。
第4行表示第1 + 2列必须至少为475像素，而第3 + 4列必须至少为475像素。

由于没有关于column2的说法，并且column2不包含任何数据，因此它的大小设置为最小宽度，而column1的大小设置为比您预期的更大的宽度。

您可以通过使用<col>语法，CSS规则或指定表格第一行中的大小（使用<td width="">）指定列本身的宽度来解决此问题。

使用colSpans的HTML表格未按预期显示

4 个答案: