我有一张表,试图将第一列的宽度设置为20%,并将其单元格的内容用省略号包裹。我的目标是无论屏幕大小和单元格内容的长度如何,都保持20%的宽度固定。但是,当电池的含量较长时,电池的拉伸强度会超过20%。我确实尝试过table-layout: fixed
,但是由于某种原因,它导致浏览器完全忽略了我的列宽指令。我正在使用Chrome,这是一个jsfiddle:
http://jsfiddle.net/07sktof2/7/
谢谢。
最佳答案
您需要设置td max-width:
table {
font-size: 14px;
width: 100%;
border: 1px solid;
border-collapse: collapse;
}
td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid black;
}
.first {
width: 20%;
padding-right: 20px;
}
.first .ellipsis {
width: 90%;
display:inline-block;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: nowrap;
}
<table>
<thead>
<tr>
<th>header 1</th>
<th>header 234567895678657</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">
<span class="ellipsis">
data long long long long long long long long long long long long cell
</span>
</td>
<td class="second">data 2</td>
</tr>
<tr>
<td class="first">short</td>
<td class="second">data 2</td>
</tr>
</tbody>
</table>
Try it Online!
关于html - 防止长细胞含量拉伸(stretch)细胞,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51578802/