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

Javascript Problem Overview

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>

Javascript Solutions

Solution 1 - Javascript

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.

Solution 2 - Javascript

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.

Solution 3 - Javascript

Try:

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

Solution 4 - Javascript

Where ever you need to text in one line put this code

white-space:nowrap

Solution 5 - Javascript

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.

Solution 6 - Javascript

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.

Solution 7 - Javascript

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

Solution 8 - Javascript

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

Solution 9 - Javascript

Use position:absolute; and width:xxx%; on the td-Element.

Solution 10 - Javascript

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	ine	View Question on Stackoverflow
Solution 1 - Javascript	DavGarcia	View Answer on Stackoverflow
Solution 2 - Javascript	Kenan Banks	View Answer on Stackoverflow
Solution 3 - Javascript	cletus	View Answer on Stackoverflow
Solution 4 - Javascript	ANJYR	View Answer on Stackoverflow
Solution 5 - Javascript	Ron W	View Answer on Stackoverflow
Solution 6 - Javascript	splintor	View Answer on Stackoverflow
Solution 7 - Javascript	Jobo	View Answer on Stackoverflow
Solution 8 - Javascript	Ben	View Answer on Stackoverflow
Solution 9 - Javascript	Konstantin XFlash Stratigenas	View Answer on Stackoverflow
Solution 10 - Javascript	John_	View Answer on Stackoverflow