Table 列在 chrome 中失去宽度

Question

我发现 Chrome 和 Firefox 行为之间存在这种非常奇怪的差异。

我有一个列集 width: 25% 和一个图像 header。没有图像 header 两个浏览器的行为方式相同，但是有了图像，列在 chrome 上失去了宽度。点击图片查看：

input {
  display: none;
}
input:checked +img {
  display: none;
}

<table width='600' border='0' cellspacing='0' style='margin:0; padding:0; text-align:center; background:white; color: #555; font-size:18px; font-weight:300; font-family: Roboto, Verdana, Arial, sans-serif'>
  <tbody>
    <tr>
      <td colspan="4">
        <label>
          <input type="checkbox">
          <img src="http://www.esandra.com/file/2012/09/slider-imagen.jpg">
        </label>
      </td>
    </tr>
    <tr>
      <td colspan="4">APPROVED</td>
    </tr>
    <tr>
      <td style="width:25%;">LOC</td>
      <td>Name</td>
      <td>#</td>
      <td>age</td>
    </tr>
    <tr>
      <td style="width:25%;">UK</td>
      <td>Simon</td>
      <td>1</td>
      <td>18</td>
    </tr>
    <tr>
      <td style="width:25%;">UK</td>
      <td>Niles</td>
      <td>2</td>
      <td>51</td>
    </tr>
    <tr>
      <td colspan="4">NOT APPROVED</td>
    </tr>
    <tr>
      <td style="width:25%;">UK</td>
      <td>What happens if any name is thiiiiiis long</td>
      <td>3</td>
      <td>13203203212 seconds and 1215 minutes</td>
    </tr>
  </tbody>
</table>

我认为这与其他问题不同，因为它只有在图像存在时才会发生...

这是一支笔供您尝试：http://codepen.io/vandervals/pen/waPQZj?editors=110

有人知道如何让它在 Chrome 中像在 Firefox 中一样工作吗？

编辑：我忘了说这是一份内容可变的时事通讯，这就是为什么表格是必需的（否则我不会用它们伤害自己） .

Answer 1

尝试将 table-layout: fixed; 添加到您的 table。参见 fiddle.

稍后编辑：

我在 chrome 中也通过向图像添加 max-width: 100% 获得了 firefox 的功能。参见 fiddle.

Table 列在 chrome 中失去宽度

Table column losing width in chrome

html

css

html-table