Fluid table with td nowrap & text-overflow?
Here is my problem 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 l开发者_运维问答ong 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
btw, anyway to minic text-overflow on Firefox?
Edit: fixed this myself using CSS:
table { table-layout:fixed; width:100%; }
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:
div { width: 0; min-width: 100%; }
The main trick is giving the width something other than auto/percent, and using a min-width of 100%;
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>
JSfiddle
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>
for me,
<style type='text/css'>
table {
white-space: normal;
}
</style>
worked...
加载中,请稍侯......
精彩评论