Question

我有一个包含2行3列的表格，我想将colspan=2设置为1x2 cell和2x1 cell。但输出似乎与我预期的不同。

预期的一个： enter image description here

但显示的输出： enter image description here

这是html：

<!DOCTYPE HTML PUBLIC>
<html>
 <body>
    <table border=1 cellpadding=0 cellspacing=0 width=100%>
    <tr>
        <td >1x1</td>
        <td COLSPAN=2>1x2</td>
    </tr>
    <tr>
        <td COLSPAN=2>2X1</td>
        <td>2x2</td>
    </tr>
    </table>
 </body>
</html>

有人可以帮助我使用table和colspan来实现预期的输出吗？

Answer 1

添加以下CSS类：

table {
    table-layout: fixed;
}

<强> FIDDLE

Answer 2

表中没有任何内容需要第二列的任何非零宽度，因为其中的插槽与其他插槽共享。有多种方法可以解决这个问题。

在@ Danield的答案中设置table-layout: fixed通过强制fixed table layout来解决问题。当没有用CSS或HTML表示的宽度要求时，它的算法将可用空间均匀地划分为列。如果甚至是你想要的除法（即使你的“预期的”有些不同），这是最简单的方法。

另一种方法是明确设置宽度，例如在这种情况下（见jsfiddle）

td {
  width: 33.33%;
}
td[colspan=2] {
  width: 66.67%;
}

如果你只是想要分裂，这是不必要的笨拙。但如果你想要，例如列宽为25％，50％，25％，您可以使用以下内容（参见other jsfiddle）：

<style>
col {
  width: 25%;
}
col:nth-of-type(2) {
  width: 50%;
}
</style>

... ...

在这种情况下，直接设置列的宽度（通过样式化col元素）比通过设置单元格的宽度（可能占用多个列）间接设置宽度更容易。

表colspan看起来不同

2 个答案: