I have an HTML table that looks like this:
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps |two test |
-------------------------------------------------
But I want it to hide the overflow. The reason here is that the text contains a link to more details, and having the "wrapping" wastes lots of space in my layout. It should like this (without increasing the widths of the columns or the table, because they'll go off the screen/create a horizontal scrollbar otherwise):
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------
I've tried lots of different CSS techniques to try to get this, but I can't get it to turn out right. Mootables is the only thing I've found that does this: http://joomlicious.com/mootable/, but I can't figure out how they do it. Does anyone know how I can do this with my own table using CSS and/or Javascript, or how Mootables does it?
Sample HTML:
<html><body>
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table></body></html>
This question is related to
javascript
html
css
If you don't want the text to wrap and you don't want the size of the column to get bigger then set a width and height on the column and set "overflow: hidden" in your stylesheet.
To do this on only one column you will want to add a class to that column on each row. Otherwise you can set it on all columns, that is up to you.
Html:
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td class="column-1">this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table>
stylsheet:
.column-1
{
overflow: hidden;
width: 150px;
height: 1.2ex;
}
An ex unit is the relative font size for height, if you are using pixels to set the font size you may wish to use that instead.
Try:
td, th {
white-space: nowrap;
overflow: hidden;
}
This trick here is using the esoteric table-layout:fixed rule
This CSS ought to work against your sample HTML:
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
You also ought to specify explicit column widths for the <td>s.
The table-layout:fixed rule says "The cell widths of this table depend on what I say, not on the actual content in the cells". This is useful normally because the browser can begin displaying the table after it has received the first <tr>. Otherwise, the browser has to receive the entire table before it can compute the column widths.
Use position:absolute; and width:xxx%; on the td-Element.
As cletus said, you should use white-space: nowrap to avoid the line wrapping, and overflow:hidden to hide the overflow. However, in order for a text to be considered overflow, you should set the td/th width, so in case the text requires more than the specified width, it will be considered an overflow, and will be hidden.
Also, if you give a sample web page, responders can provide an updated page with the fix you like.
This trick here is using the esoteric table-layout:fixed rule
This CSS ought to work against your sample HTML:
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
You also ought to specify explicit column widths for the <td>s.
The table-layout:fixed rule says "The cell widths of this table depend on what I say, not on the actual content in the cells". This is useful normally because the browser can begin displaying the table after it has received the first <tr>. Otherwise, the browser has to receive the entire table before it can compute the column widths.
If you hide the overflow and there is a long word, you risk loosing that word, so you could go one step further and use the "word-wrap" css attribute.
http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx
Where ever you need to text in one line put this code
white-space:nowrap
If you don't want the text to wrap and you don't want the size of the column to get bigger then set a width and height on the column and set "overflow: hidden" in your stylesheet.
To do this on only one column you will want to add a class to that column on each row. Otherwise you can set it on all columns, that is up to you.
Html:
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td class="column-1">this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table>
stylsheet:
.column-1
{
overflow: hidden;
width: 150px;
height: 1.2ex;
}
An ex unit is the relative font size for height, if you are using pixels to set the font size you may wish to use that instead.
As cletus said, you should use white-space: nowrap to avoid the line wrapping, and overflow:hidden to hide the overflow. However, in order for a text to be considered overflow, you should set the td/th width, so in case the text requires more than the specified width, it will be considered an overflow, and will be hidden.
Also, if you give a sample web page, responders can provide an updated page with the fix you like.
Try:
td, th {
white-space: nowrap;
overflow: hidden;
}
I wonder if it might be worth using PHP (or another server-side scripting language) or Javascript to truncate the strings to the right length (although calculating the right length is tricky, unless you use a fixed-width font)?
For those further interested:
Existing Dynamic Table Cells: ## Long text with NO SPACES i.e. email addresses ##
It appears a full replication of the MS (and others) use of text-overflow:ellipsis cannot be duped in FireFox so far as adding the internally appended … to clipped text is concerned; especially without javascript which is often user switched off these days.
All ideas I have found to help me have failed to address dynamic resizing and long text without spaces.
However, I had a need for clipping in a dynamic width table in one of my progs admin windows. So with a little fiddling an acceptable all browser answer can be hacked from the supplied samples at “MSDN”.
i.e.
<table width="20%" border="1" STYLE="position: absolute; top: 100;">
<tr>
<td width="100%"><DIV STYLE="position: relative; height: 14px; top: 0px; width:100%;">
<DIV STYLE="position: absolute; left: 0px; top: 0px; color: black; width: 100%; height: 14px;
font: 12px Verdana, Arial, Geneva, sans-serif; overflow: hidden; text-overflow:ellipsis;">
<NOBR>fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident, that all people are created equal.</NOBR></DIV>
</DIV>
</td>
</tr>
</table>
Only small shortcoming is Firefox users don’t see the “…” bit; which is summink I don’t really mind at this stage.
Future FF should, hopefully, resolve gracefully if implementing this very important useful option. So now I don’t need to rewrite using less favorable futuristic non tabled content either (don’t argue; there’s plenty of broken web sites around ’cause of it these days).
Thanks to: http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx
Hope it helps some bod.
If you hide the overflow and there is a long word, you risk loosing that word, so you could go one step further and use the "word-wrap" css attribute.
http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx
As cletus said, you should use white-space: nowrap to avoid the line wrapping, and overflow:hidden to hide the overflow. However, in order for a text to be considered overflow, you should set the td/th width, so in case the text requires more than the specified width, it will be considered an overflow, and will be hidden.
Also, if you give a sample web page, responders can provide an updated page with the fix you like.
Try:
td, th {
white-space: nowrap;
overflow: hidden;
}
This trick here is using the esoteric table-layout:fixed rule
This CSS ought to work against your sample HTML:
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
You also ought to specify explicit column widths for the <td>s.
The table-layout:fixed rule says "The cell widths of this table depend on what I say, not on the actual content in the cells". This is useful normally because the browser can begin displaying the table after it has received the first <tr>. Otherwise, the browser has to receive the entire table before it can compute the column widths.
I wonder if it might be worth using PHP (or another server-side scripting language) or Javascript to truncate the strings to the right length (although calculating the right length is tricky, unless you use a fixed-width font)?
If you don't want the text to wrap and you don't want the size of the column to get bigger then set a width and height on the column and set "overflow: hidden" in your stylesheet.
To do this on only one column you will want to add a class to that column on each row. Otherwise you can set it on all columns, that is up to you.
Html:
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td class="column-1">this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table>
stylsheet:
.column-1
{
overflow: hidden;
width: 150px;
height: 1.2ex;
}
An ex unit is the relative font size for height, if you are using pixels to set the font size you may wish to use that instead.
Try:
td, th {
white-space: nowrap;
overflow: hidden;
}
For those further interested:
Existing Dynamic Table Cells: ## Long text with NO SPACES i.e. email addresses ##
It appears a full replication of the MS (and others) use of text-overflow:ellipsis cannot be duped in FireFox so far as adding the internally appended … to clipped text is concerned; especially without javascript which is often user switched off these days.
All ideas I have found to help me have failed to address dynamic resizing and long text without spaces.
However, I had a need for clipping in a dynamic width table in one of my progs admin windows. So with a little fiddling an acceptable all browser answer can be hacked from the supplied samples at “MSDN”.
i.e.
<table width="20%" border="1" STYLE="position: absolute; top: 100;">
<tr>
<td width="100%"><DIV STYLE="position: relative; height: 14px; top: 0px; width:100%;">
<DIV STYLE="position: absolute; left: 0px; top: 0px; color: black; width: 100%; height: 14px;
font: 12px Verdana, Arial, Geneva, sans-serif; overflow: hidden; text-overflow:ellipsis;">
<NOBR>fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident, that all people are created equal.</NOBR></DIV>
</DIV>
</td>
</tr>
</table>
Only small shortcoming is Firefox users don’t see the “…” bit; which is summink I don’t really mind at this stage.
Future FF should, hopefully, resolve gracefully if implementing this very important useful option. So now I don’t need to rewrite using less favorable futuristic non tabled content either (don’t argue; there’s plenty of broken web sites around ’cause of it these days).
Thanks to: http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx
Hope it helps some bod.
This trick here is using the esoteric table-layout:fixed rule
This CSS ought to work against your sample HTML:
table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}
You also ought to specify explicit column widths for the <td>s.
The table-layout:fixed rule says "The cell widths of this table depend on what I say, not on the actual content in the cells". This is useful normally because the browser can begin displaying the table after it has received the first <tr>. Otherwise, the browser has to receive the entire table before it can compute the column widths.
Use position:absolute; and width:xxx%; on the td-Element.
If you hide the overflow and there is a long word, you risk loosing that word, so you could go one step further and use the "word-wrap" css attribute.
http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx
I wonder if it might be worth using PHP (or another server-side scripting language) or Javascript to truncate the strings to the right length (although calculating the right length is tricky, unless you use a fixed-width font)?
As cletus said, you should use white-space: nowrap to avoid the line wrapping, and overflow:hidden to hide the overflow. However, in order for a text to be considered overflow, you should set the td/th width, so in case the text requires more than the specified width, it will be considered an overflow, and will be hidden.
Also, if you give a sample web page, responders can provide an updated page with the fix you like.
I wonder if it might be worth using PHP (or another server-side scripting language) or Javascript to truncate the strings to the right length (although calculating the right length is tricky, unless you use a fixed-width font)?
Source: Stackoverflow.com