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

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为8px宽，直到添加内容为止，然后应扩展以适应内容。

在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规则中。