Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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> 
like image 540
ine Avatar asked Jan 08 '09 23:01

ine


People also ask

How do I force one line in HTML?

To get all elements to appear on one line the easiest way is to: Set white-space property to nowrap on a parent element; Have display: inline-block set on all child elements.

How do I put text on one line in HTML?

The best way to use is white-space: nowrap; This will align the text to one line.

How do I force a div to stay in one line?

You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”.


2 Answers

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.

like image 186
DavGarcia Avatar answered Oct 12 '22 19:10

DavGarcia


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.

like image 25
Kenan Banks Avatar answered Oct 12 '22 21:10

Kenan Banks