html - 为什么文本内容会影响表格单元格的宽度？

Question

我有一个像这样的简单表格:

<table cellpadding="0" cellspacing="0">
  <tbody>
     <tr>
      <td class="header" colspan="2">
          <h1>
            Thisismytitlexxxxxxxxxxxxxxxxx
          </h1>
      </td>
    </tr>
    <tr>
      <td id="sidebar"></td>
      <td class="main">
          <div class="bubble">lorem1</div>
      </td>
    </tr>
</tbody>

我要#sidebar td在向其中添加内容之前为 8 像素宽，此时它应该扩展以适合内容。

在 Safari 8.0.3 中，宽度表现异常 - <h1> 中的文本内容正在影响 #sidebar 的大小(第一个 td 在下一个 tr )；添加字符使其变大，添加空格使其变小。如果 .bubble 中的文本宽度会改变也被改变了。

代码演示: http://jsbin.com/cucacekapu/edit?html,css,output

在 td.main 上设置像素宽度解决了这个问题，但为什么会发生这种情况，有没有办法在不设置像素宽度的情况下解决这个问题？

Answer 1

将 table-layout: fixed 添加到表格的 CSS 规则中。