获取指定宽度的表格行以将所有内容保留在一行上并根据需要截断一个单元格？ （HTML/CSS）
我有一个包含四列的基本表格（我们称它们为 A、B、C、D）和特定的所需宽度 600 像素。内容均为文字。我想要的是按如下方式分配列宽度：
- 列 AC 的宽度足以容纳文本而无需任何换行，更宽的
- 列 D 不会获得剩余的宽度，并切断任何溢出而不是换行到新的线。
我怎样才能用 CSS 来完成这个任务呢？
这是我得到的最接近的结果：
<table style="width: 600px; table-layout: fixed;">
<thead>
<th style="white-space: nowrap;">Column A</th>
<th style="white-space: nowrap;">Column B</th>
<th style="white-space: nowrap;">Column C</th>
<th>Column D</th>
</thead>
<tbody>
<tr>
<td style="white-space: nowrap;">12345</td>
<td style="white-space: nowrap;">Some Text</td>
<td style="white-space: nowrap;">Some More Text</td>
<td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
Some very long text goes here. This text is going to get cut off. It won't all fit in this cell. I hope it doesn't wrap onto a second line. That would be bad.
</td>
</tr>
</tbody>
</table>
在这种情况下，A、B 和 C 列的宽度与内容无关。它为单元格提供了过多的空间来容纳短文本，而为单元格提供了太少的空间来容纳长文本。然而，它确实正确地截断了 D 列。
我还尝试将 AC 列的宽度设置为 1%，将 D 列的宽度设置为 100%，但随后它们都在表格的左边缘一起运行。
有什么想法如何获得宽度计算吗？
I have a basic table with four columns (let's call them A, B, C, D) and a specific desired width, 600px. The contents are all text. What I want is for the column widths to be allocated as follows:
- Columns A-C are just wide enough to fit the text without any wrapping, no wider
- Column D gets whatever width is left over, and cuts off any overflow instead of wrapping to a new line.
How can I accomplish this with CSS?
This is the closest I've gotten:
<table style="width: 600px; table-layout: fixed;">
<thead>
<th style="white-space: nowrap;">Column A</th>
<th style="white-space: nowrap;">Column B</th>
<th style="white-space: nowrap;">Column C</th>
<th>Column D</th>
</thead>
<tbody>
<tr>
<td style="white-space: nowrap;">12345</td>
<td style="white-space: nowrap;">Some Text</td>
<td style="white-space: nowrap;">Some More Text</td>
<td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
Some very long text goes here. This text is going to get cut off. It won't all fit in this cell. I hope it doesn't wrap onto a second line. That would be bad.
</td>
</tr>
</tbody>
</table>
In this case the width for Columns A, B, and C has nothing to do with the content. It gives the cells too much space for short text and too little space for long text. It does, however, properly truncate Column D.
I also tried setting the widths of Columns A-C to 1% and Column D to 100%, but then they all run together at the left edge of the table.
Any ideas how I can get that width calculation?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可能想要这样的东西 http://jsfiddle.net/2qHY3/3/ ..？
删除
通过从最后一个
中Might you want some thing like this http://jsfiddle.net/2qHY3/3/ ..?
by removing
from the last
<td>