如何防止表格单元格提前换行？异常换行问题求助

API 探路者

2026-7-5

表格单元格换行异常问题

问题现象

当表格单元格数量不足以填满页面水平宽度时，最后一个单元格会莫名换行；但当单元格数量足够撑满宽度后，换行又恢复正常。期望的效果是仅当最后一个单元格无法在当前行水平容纳时才换行。

具体表现：

假设页面可容纳14个单元格，显示13个时，前12个在第一行，第13个单独换行到第二行
显示5个时，前4个在第一行，第5个单独换行到第二行

代码示例

HTML

<div id='page'>

<!--Other page contents-->

  <table id='exampleTable'>
    <tr>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
    </tr>
  </table>

<!--Other page contents-->

</div>

CSS

#page {
  width: 60%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f2f2f2;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  font-size: 12px;
}

#exampleTable {
  max-width: 95%;
}

#exampleTable td {
  display: inline-block;
  background-color: white;
  width: 60px;
  margin: 5px;
  padding: 0.3%;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
}