Question

我对colspan的理解或HTML表格中实现colspan的浏览器存在问题。请参阅以下示例：

td {
  border: 1px solid red;
}

<table>
  <tr>
    <td id="upper-td" colspan="2">
      <div style="width:500px">colspan</div>
    </td>
  </tr>
  <tr>
    <td id="broken-td">col 1</td>
    <td id="fullwidth-td" style="width:100%">col 2</td>
  </tr>
</table>

根据我的理解，由于#upper-td，td不应影响较低colspan=2的宽度。这就是Firefox中的情况。

在Chrome浏览器，IE11和Edge中，#broken-td的offsetWidth为250px（宽度为248px，向左和向右填充1px）。这恰好是#upper-td内容宽度的一半（我测试了多个宽度并且这个比例保持不变）。

有人可以解释这种行为吗？

变通方法是设置#broken-td{width:0}（适用于IE，不适用于Chrome）或#broken-td{width:1%}（适用于Chrome，不适用于IE）。但是，用户代理嗅探解决方法是我要向代码库引入的最后一件事。

Answer 1

上排确实不会影响下排的宽度：它的宽度是默认的100％。（在浏览器工具中查看），500px设置或多或少独立于此。

下排的相当奇怪的划分是由于其第二个单元格的100％宽度设置（与tr的宽度相关）：它试图跨越整个宽度，但不能完全，因为要显示第一个单元格的内容，这是通过使用换行符实现的最小可能宽度来完成的，这样单元格的宽度就是其最长的单词。

另见http://codepen.io/anon/pen/xORBXO

（编辑：我在codepen中添加了两个变量：设置总是相同的，包裹元素的宽度，也可能是视口本身不同：500,400和600px;）

Answer 2

我认为Firefox正确呈现它，看起来像Chrome和IE中的一个错误，但不确定。作为一种解决方法，使用<col>元素似乎在不同的浏览器中运行良好。

<强> jsFiddle

＆＃13;

td {
  border: 1px solid red;
}
table {
  width: 100%;
}
.col-1 {
  width: 1px;
}

＆＃13;

<table>
  <col class="col-1">
  <col class="col-2">
  <tr>
    <td id="upper-td" colspan="2">
      <div style="width:500px">colspan</div>
    </td>
  </tr>
  <tr>
    <td id="broken-td">col 1</td>
    <td id="fullwidth-td">col 2</td>
  </tr>
</table>

＆＃13;

colspan +固定宽度内容影响td宽度

2 个答案: