在表格中，如何将溢出的文本<td>设置为<td>下一行中的相应文本？

Question

我有很多文本要输入到详细信息表单元格中。我希望当文本达到单元格中的最大宽度时，文本将溢出到下一行中的相应单元格，而不是在同一单元格中开始新行。

table{
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td{
border: 1px solid black;
padding: 15px;
}
th{
text-align: center;
}

<table>
	<tr>
<th>Number</th>
<th>Details</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

Answer 1

您可以使用单元格内的另一个div执行此操作：

.HTML：

<tr>
<td>
<div class="overflow">Lots of text about lots of things.  Overflow this into the other cell. Lots of text about lots of things.  Overflow this into the other cell. Lots of text about lots of things.  Overflow this into the other cell. 
</div>
</td>
</tr>

.CSS：

td{
border: 1px solid black;
padding: 15px;
height: 20px !important;
overflow:visible;
position:relative;
}
.overflow {
position:absolute;
top:0;
}

看看这个工作示例

Answer 2

因为表结构。

display:table-cell;可确保单元格不会相互重叠。

如果将display:table-cell;更改为display:inline-block;

你给它一个固定的高度/宽度，white-space: nowrap;你会看到预期的行为。 但是，如果要更改表的显示属性，最好不要使用它。

工作实例 ：

table{
border: 1px solid black;
border-collapse: collapse; 
display:inline-block;
}
th{
border: 1px solid black;
padding: 15px;
display:inline-block;
}
td{
border: 1px solid black;
display:inline-block;
width:100px;
height:100px;
white-space: nowrap;
}
th{
text-align: center;
}

<table>
<tr>
<th>Number</th>
<th>Details</th>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>