ansaurus

Question

CSS/Javascript to force html table row on a single line

Answer 1

+12 A:

Use the CSS property white-space: nowrap and overflow: hidden on your td.

Update

Just saw your comment, not sure what I was thinking, I've done this so many times I forgot how I do it. This is approach that works well in most browsers for me... rather than trying to constrain the td, I use a div inside the td that will handle the overflow instance. This has a nice side effect of being able to add your padding, margins, background colors, etc. to your div rather than trying to style the td.

<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td>
    <div class="hideextra" style="width:200px">
  this is the text in column one which wraps</div></td>
   <td>
 <div class="hideextra" style="width:100px">
  this is the column two test</div></td>
</tr>
</table>
</body>
</html>

As a bonus, IE will place an ellipsis in the case of an overflow using the browser-specific text-overflow:ellipsis style. There is a way to do the same in FireFox automatically too, but I have not tested it myself.

Update 2

I started using this truncation code by Justin Maxwell for several months now which works properly in FireFox too.

DavGarcia 2009-01-08 23:04:29

I've tried that, actually. It just makes spreads the table out, forcing it to stay on a single line, but increasing the width of the table. I'm updating the question to clarify.

amdfan 2009-01-08 23:15:48

looking at the update now: Awesome! That is exactly what I wanted.

amdfan 2009-01-16 02:41:36

Answer 2

+1 A:

Try:

td, th {
  white-space: nowrap;
  overflow: hidden;
}

cletus 2009-01-08 23:04:55

Answer 3

A:

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.

splintor 2009-01-08 23:13:36

Answer 4

A:

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

Jobo 2009-01-08 23:17:20

Interesting, but don't really care if I lose the word. I'm just interested in providing a preview.

amdfan 2009-01-08 23:37:43

Answer 5

A:

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)?

Ben 2009-01-08 23:27:33

Answer 6

+3 A:

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.

Triptych 2009-01-09 03:09:41

Answer 7

A:

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.

John_ 2009-01-11 20:29:46

Answer 8

+1 A:

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.

<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.

2009-06-19 22:28:44

ansaurus

tags:

views:

answers:

CSS/Javascript to force html table row on a single line

Update

Update 2

related questions