使HTML表格单元格中的文本与其他单元格重叠 [英] Make text in a HTML table cell overlap other cells
问题描述
我希望一个单元格中有一些较长的文本,以便在下一个单元格中重叠而不是换行,但又不使第一列变大.
I want to have some longer text in a cell to overlap in the next cell instead of wrapping, but without making the first column bigger.
如果我给牢房
white-space: nowrap;
position: absolute;
它将在正确的位置,但其他文本将在其下流动.
it will be in the right position but other text will flow under it.
感谢您的快速解答.
推荐答案
通过设置overflow: visible
,防止换行和设置固定宽度,可以使一个单元格的内容流入同一行的其他单元格中.还需要固定的表格布局.您还需要一段时间为表格设置固定宽度,否则浏览器将无法固定表格布局.
You can make the content of a cell flow into other cells on the same row by setting overflow: visible
, preventing line breaks, and setting a fixed width, which also requires fixed table layout. You also need to set a fixed width for the table as a while, because otherwise browsers won’t do fixed table layout.
<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建议的操作,这不会使单元格内容溢出到其他单元格,而是使该单元格跨越所有五列.
This is so complicated that you should probably do what @MikeW suggests, which does not make the cell content overflow to other cells but makes the cell span all the five columns.
这篇关于使HTML表格单元格中的文本与其他单元格重叠的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!