Html 浏览器是如何决定这些表列的宽度的？

我有下表：

我有点不高兴，因为第二列的宽度迫使文本换行成3行。渲染器将第一列的宽度减小一点，并将两个元素都包装到两行上，这不是更有意义吗？像这样：

有没有什么办法让我把桌子摆错了

（我不想设置一个显式的列宽，因为我不确定以后可能要在其中放入哪些其他内容。我希望尽可能使用浏览器的默认行为）

谢谢大家!

<table class="sequence">
   <tbody>
      <tr>
         <td>Rhythm</td>
         <td>Msec</td>
      </tr>
      <tr>
         <td>8xxooxxoo 6xxxxxx 8xxooxxoo 6xxxxxx</td>
         <td>168ms average<br>(5 tapbacks)</td>
      </tr>
   </tbody>
</table>

---

这就是换行符发生的方式。你需要javascript来改变这一点。谢谢@Paulie_D。你能扩展一下“换行发生的方式”吗？我想知道它是用什么算法来计算这些列宽的。我知道你不想给你的列设置一个固定的宽度，但是如果你给列添加一个最小宽度呢？这样的话，它在一定程度上仍然是动态的。@corneé谢谢你，事实上这正是我刚才所做的，它工作得很好。但我仍然很好奇浏览器使用什么算法来决定宽度。我读过这篇文章，但我不能说我更清楚了。希望了解渲染器的过程。

table.sequence {
    margin-left:auto;
    margin-right:auto;
    width: 320px;
}
table.sequence th, table.sequence td  {
    border: 1px solid black;
    border-collapse: collapse;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    vertical-align: middle;
    word-wrap: normal;
}