使HTML表格单元格中的文本与其他单元格重叠

Question

我希望单元格中有一些较长的文本在下一个单元格中重叠而不是换行，但不会使第一列更大。

如果我给单元格

white-space: nowrap;
position: absolute;

它将处于正确的位置，但其他文本将在其下流动。

感谢您的快速回答。

Answer 1

您可以通过设置overflow: visible，防止换行和设置固定宽度来使单元格的内容流入同一行的其他单元格，这也需要固定的表格布局。您还需要为表格设置固定宽度，因为否则浏览器将不会执行固定的表格布局。

<style>
.x { 
  width: 3em;
  white-space: nowrap;
  overflow: visible;
  color: red;
}
table {
  table-layout: fixed;
}
th:nth-child(1) { width: 3em; }
th:nth-child(2) { width: 15em; }
th:nth-child(3) { width: 2em; }
th:nth-child(4) { width: 7em; }
th:nth-child(5) { width: 3em; }
</style>
<table border cellspacing=0>
<thead>
   <th>nr<th>name<th>year<th>category<th>price
<tbody>
<tr>
  <td><div class=x>A longer line that should not wrap , but go over the other cells</div></td>
  <td><td><td><td>
<tr>
  <td>999.0
  <td>Some name
  <td>2000
  <td>Some category
  <td>135.32
</table>

这太复杂了，你应该做@MikeW建议的事情，这不会让细胞内容溢出到其他细胞，但会使细胞跨越所有五列。

Answer 2

表示具有红色文本的单元格的行：

<tr><td colspan="5">red text</td></tr>