I have a table containing cells with text of various lengths. It is essential that all of the table cells are of the same width. If this means truncating long words or forcing a break in long words then that's OK.
I cannot figure out any way of getting this to work.
This is for an internal client application so needs to work in IE6 and IE7 only.
An example page is below. The cell containing onereallylongword is the offending one.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
td { width: 30px; }
</style>
</head>
<body>
<table border="2">
<tr>
<td>word</td>
<td>two words</td>
<td>onereallylongword</td>
</tr>
</table>
</body>
</html>
This question is related to
html
css
user-interface
html-table
Try this:
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
try td {background-color:white}
It just worked for a column I didn't want to get trampled by a previous column's long text.
As long as you fix the width of the table itself and set the table-layout property, this is pretty simple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
td { width: 30px; overflow: hidden; }
table { width : 90px; table-layout: fixed; }
</style>
</head>
<body>
<table border="2">
<tr>
<td>word</td>
<td>two words</td>
<td>onereallylongword</td>
</tr>
</table>
</body>
</html>
I've tested this in IE6 and 7 and it seems to work fine.
I realize you needed a solution for IE6/7 but I'm just throwing this out for anyone else.
If you can't use table-layout: fixed and you don't care about IE < 9 this works for all browsers.
td {
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
max-width: 30px;
}
As long as you fix the width of the table itself and set the table-layout property, this is pretty simple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
td { width: 30px; overflow: hidden; }
table { width : 90px; table-layout: fixed; }
</style>
</head>
<body>
<table border="2">
<tr>
<td>word</td>
<td>two words</td>
<td>onereallylongword</td>
</tr>
</table>
</body>
</html>
I've tested this in IE6 and 7 and it seems to work fine.
Try this:
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap;
I realize you needed a solution for IE6/7 but I'm just throwing this out for anyone else.
If you can't use table-layout: fixed and you don't care about IE < 9 this works for all browsers.
td {
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
max-width: 30px;
}
If you want to the long text wrapped properly in new lines then in your table id call use a css property table-layout:fixed; otherwise simply css can't break the long text in new lines.
try td {background-color:white}
It just worked for a column I didn't want to get trampled by a previous column's long text.
<style type="text/css">
td { word-wrap: break-word;max-width:50px; }
</style>
<style type="text/css">
td { word-wrap: break-word;max-width:50px; }
</style>
As long as you fix the width of the table itself and set the table-layout property, this is pretty simple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
td { width: 30px; overflow: hidden; }
table { width : 90px; table-layout: fixed; }
</style>
</head>
<body>
<table border="2">
<tr>
<td>word</td>
<td>two words</td>
<td>onereallylongword</td>
</tr>
</table>
</body>
</html>
I've tested this in IE6 and 7 and it seems to work fine.
If you want to the long text wrapped properly in new lines then in your table id call use a css property table-layout:fixed; otherwise simply css can't break the long text in new lines.
Source: Stackoverflow.com