Menu
The following code works as desired on chrome.
But not on firefox or IE. Adding <!DOCTYPE html> tag to this code, leads it not working on chrome too. Has text-overflow been deprecated or something? How can I make it compatible with all browsers and HTML5?
<head>
<style type='text/css'>
table {
display: block;
margin: 30px 0 auto 0;
width: 100%;
max-width: 1300px;
text-align: left;
white-space: nowrap;
border-collapse: collapse;
z-index: -1;
table-layout:fixed;
}
td {
overflow: hidden;
white-space: nowrap;
word-wrap:break-word;
text-overflow:ellipsis;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th style="width: 18%;">Col 1</th>
<th style="width: 12%;">Col 2</th>
<th style="width: 13%;">Col 3</th>
<th style="width: 7%">Col 4</th>
<th style="width: 7%">Col 5</th>
<th style="width: 6%">Col 6</th>
<th style="width: 5%">Col 7</th>
<th style="width: 13%">Col 8</th>
<th style="width: 16%">Col 9</th>
<th style="width: 3%">Col 10</th>
</tr>
<tr>
<td>Some</td>
<td>Data</td>
<td>Stuff</td>
<td>foo</td>
<td>bar</td>
<td>etc</td>
<td>whatever</td>
<td>stuff</td>
<td>Alotofdataikkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
<td>Yes</td>
</tr>
</table>
</body>
This is what I want.
880
You have misused the text-overflow property.
If you want to wrap text of an element, you have to specify the width or max-width of that element so that browsers know how to wrap the text content.
[EDITED] This is example code:
<head>
<style type='text/css'>
table {
display: block;
margin: 30px 0 auto 0;
/*width: 100%;*/
max-width: 900px;
text-align: left;
white-space: nowrap;
border-collapse: collapse;
z-index: -1;
table-layout:fixed;
}
td {
overflow: hidden;
white-space: nowrap;
word-wrap:break-word;
text-overflow: ellipsis;
border: 1px solid black;
}
.col1 {
width: 80px;
}
.col7 {
max-width: 300px;
}
.col8 {
max-width: 300px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="col1">Col 1</th>
<th class="col2">Col 2</th>
<th class="col3">Col 3</th>
<th class="col4">Col 4</th>
<th class="col5">Col 5</th>
<th class="col6">Col 6</th>
<th class="col7">Col 7</th>
<th class="col8">Col 8</th>
<th class="col9">Col 9</th>
<th class="col10">Col 10</th>
</tr>
<tr>
<td class="col1">Some</td>
<td class="col2">Data</td>
<td class="col3">Stuff</td>
<td class="col4">foo</td>
<td class="col5">etc</td>
<td class="col6">whatever</td>
<td class="col7">stuff</td>
<td class="col8">Alotofdataikkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
<td class="col9">Yes</td>
<td class="col10">bar</td>
</tr>
<tr>
<td class="col1">Some</td>
<td class="col2">Data</td>
<td class="col3">Stuff</td>
<td class="col4">foo</td>
<td class="col5">etc</td>
<td class="col6">whatever</td>
<td class="col8">Alotofdataikkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
<td class="col7">stuff</td>
<td class="col9">Yes</td>
<td class="col10">bar</td>
</tr>
</table>
</body>
Here is demo screenshot: 
182
Add max-width to your td.
td{
overflow: hidden;
white-space: nowrap;
word-wrap:break-word;
text-overflow:ellipsis;
border: 1px solid black;
max-width: 50px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
