Html 带有 td nowrap 和文本溢出的流体表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5932018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fluid table with td nowrap & text-overflow?
提问by est
Here is my problem HTML:
这是我的问题 HTML：
<table style="width:100%">
<tr>
<td style="width:100%;overflow:hidden">
<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
</div>
</td>
</tr>
</table>
Here is what I wanted:
这是我想要的：
<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
</div>
That is:
那是：
- No horizontal scroll bars
divdo not make thetableandtdso wide- resizing browser window makes the
divdynamic change ofellipsis
- 没有水平滚动条
div不要让table和td那么宽- 调整浏览器窗口，使
div动态变化ellipsis
btw, anyway to minic text-overflowon Firefox?
顺便说一句，无论如何要text-overflow在 Firefox上缩小？
回答by est
Edit: fixed this myself using CSS:
编辑：我自己使用 CSS 修复了这个问题：
table { table-layout:fixed; width:100%; }
回答by Mark
Rather than using table-layout: fixed;for your table, you can use this trick to get a DIV to always take up the full space of a TD with text-overflow: ellipsis;functionality:
table-layout: fixed;您可以使用此技巧使 DIV 始终占用具有text-overflow: ellipsis;功能的 TD 的全部空间，而不是用于您的表：
div { width: 0; min-width: 100%; }
The main trick is giving the widthsomething other than auto/percent, and using a min-width of 100%;
主要技巧是给宽度设置除 auto/percent 以外的其他值，并使用 100% 的 min-width；
div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.myTable { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }
td.td1 { width: 100%; min-width: 50px; }
td.td2 { width: 100px; min-width: 100px; }
td.td3 { width: 150px; min-width: 150px; }
td.td4 { width: 50%; min-width: 50px; }
td.td5 { width: 50%; min-width: 50px; }
td.td6 { width: 150px; min-width: 150px; }
The table can be fluid sized or fixed width. Just give some min-widths for contents as needed.
桌子可以是流体尺寸或固定宽度。只需根据需要为内容提供一些最小宽度。
<table class="myTable">
<tr>
<td class="td1"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
<td class="td2"><div>Content 2</div></td>
<td class="td3"><div>Content 3 also so very lonnnnngggg</div></td>
</tr>
</table>
<table class="myTable">
<tr>
<td class="td4"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
<td class="td5"><div>Content 2 has very very very many texts in a very very very long way</div></td>
<td class="td6"><div>Content 3</div></td>
</tr>
</table>
回答by Raf
My full example :
我的完整示例：
<head>
<style>
table {
width:100%;
table-layout:fixed;
}
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>CHAMPIONNAT</td>
<td>CHAMPIONNAT</td>
<td>CHAMPIONNAT</td>
<td>CHAMPIONNAT</td>
<td>CHAMPIONNAT</td>
<td>CHAMPIONNAT</td>
</tr>
</table>
</body>
回答by Shoib Mohammed A
for me,
为了我，
<style type='text/css'>
table {
white-space: normal;
}
</style>
worked...
工作...
