如何让HTML表格<td>文本溢出至下一行对应<td>单元格？

嘿，我明白你要的效果——就是Details列的文本到了单元格最大宽度时，不自动折行，直接横向溢出到同行的其他单元格区域对吧？结合你给出的基础代码，我帮你调整一下：

修改后的CSS样式 #

table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; /* 固定表格布局，方便设置列宽 */
}

th, td {
  border: 1px solid black;
  padding: 15px;
}

th {
  text-align: center;
}

/* 针对Details列的单元格设置不换行、溢出可见 */
td:nth-child(2) {
  white-space: nowrap; /* 强制文本不换行 */
  overflow: visible; /* 允许文本溢出单元格边界 */
  width: 80%; /* 可以根据需求调整列宽比例 */
}

对应的HTML片段 #

<table>
  <tr>
    <th>Number</th>
    <th>Details</th>
  </tr>
  <tr>
    <td>1</td>
    <td>这里放你需要的大量文本，比如Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
  </tr>
</table>

简单解释下几个关键属性的作用：

• table-layout: fixed：固定表格布局，让列宽按照我们设置的比例生效，不会被内容随意撑开；
• white-space: nowrap：强制单元格内的文本始终保持一行，完全不会自动换行；
• overflow: visible：允许文本溢出单元格的边界，这样超长文本就能延伸到同行的其他单元格区域了（这个是默认值，但明确写上能避免其他样式冲突）。

这样设置后，当Details单元格的文本长度超过自身宽度时，就会横向延伸到左边的Number单元格区域，而不会自动折行啦。

内容的提问来源于stack exchange，提问作者Onerboy