css - 为什么 Microsoft Edge 忽略 td 宽度？

Question

我希望所有浏览器的行为都相同，即将表格中的所有 tds 设置为所有 tds 的最大宽度指示的宽度。

看看下面的例子:

https://jsfiddle.net/rpkbf4n6/

=> This one is displayed correct in FF/IE but wrong in Edge (the very long text is not wrapped)

https://jsfiddle.net/8oa4fw2u/

=> This one is displayed correct in FF/IE/Edge

这是为什么？我不喜欢给所有的tds赋予width属性也不喜欢给最大的内容td赋予width属性(因为内容是动态填充的，所以不知道哪个是最大的)

Answer 1

在表格上方添加一个 DIV 并使用 table-layout: fixed 然后它可以与 Edge 一起使用

<div class="wrap">
  <table class="table">
    <tbody>
      <tr>
        <td style="width:100px;">
          <span>Text</span>
        </td>
        <td>
          <input style="width:160px;">
        </td>
      </tr>
      <tr>
        <td>
          <span>Very very very very very long text</span>
        </td>
        <td>
          <input type="checkbox">
        </td>
      </tr>
    </tbody>
  </table>
</div>

.wrap {
  width: 500px;
}
.table {
  width: 100%;
  table-layout: fixed
}