CSS Javascript to force html table row on a single line

Question

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    lt html gt  lt body gt   lt table width  300px  gt   lt tr gt       lt td gt Column 1 lt  td gt  lt td gt Column 2 lt  td gt   lt  tr gt   lt tr gt      lt td gt this is the text in column one which wraps lt  td gt      lt td gt this is the column two test lt  td gt   lt  tr gt   lt  table gt  lt  body gt  lt  html gt

User · Accepted Answer

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    lt html gt   lt head gt   lt style gt   hideextra   white-space  nowrap  overflow  hidden  text-overflow ellipsis     lt  style gt   lt  head gt   lt body gt   lt table style  width  300px  gt   lt tr gt       lt td gt Column 1 lt  td gt  lt td gt Column 2 lt  td gt   lt  tr gt   lt tr gt      lt td gt       lt div class  hideextra  style  width 200px  gt          this is the text in column one which wraps lt  div gt  lt  td gt      lt td gt       lt div class  hideextra  style  width 100px  gt          this is the column two test lt  div gt  lt  td gt   lt  tr gt   lt  table gt   lt  body gt   lt  html gt    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

User · Answer

Try   td  th     white-space  nowrap    overflow  hidden

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt table width  300px  gt   lt tr gt       lt td gt Column 1 lt  td gt  lt td gt Column 2 lt  td gt   lt  tr gt   lt tr gt      lt td class  column-1  gt this is the text in column one which wraps lt  td gt      lt td gt this is the column two test lt  td gt   lt  tr gt   lt  table gt    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

User · Answer

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

User · Answer

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

User · Answer

Use position absolute  and width xxx   on the td-Element

User · Answer

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  lt td gt 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  lt tr gt    Otherwise  the browser has to receive the entire table before it can compute the column widths

User · Answer

Try   td  th     white-space  nowrap    overflow  hidden

User · Answer

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

User · Answer

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    lt table width  300px  gt   lt tr gt       lt td gt Column 1 lt  td gt  lt td gt Column 2 lt  td gt   lt  tr gt   lt tr gt      lt td class  column-1  gt this is the text in column one which wraps lt  td gt      lt td gt this is the column two test lt  td gt   lt  tr gt   lt  table gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt table width  300px  gt   lt tr gt       lt td gt Column 1 lt  td gt  lt td gt Column 2 lt  td gt   lt  tr gt   lt tr gt      lt td class  column-1  gt this is the text in column one which wraps lt  td gt      lt td gt this is the column two test lt  td gt   lt  tr gt   lt  table gt    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

User · Answer

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

User · Answer

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     lt table width  20   border  1  STYLE  position  absolute  top  100   gt   lt tr gt    lt td width  100   gt  lt DIV STYLE  position  relative  height  14px  top  0px  width 100    gt   lt 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   gt   lt NOBR gt fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident  that all people are created equal  lt  NOBR gt  lt  DIV gt   lt  DIV gt    lt  td gt   lt  tr gt   lt  table gt    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

User · Answer

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  lt td gt 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  lt tr gt    Otherwise  the browser has to receive the entire table before it can compute the column widths

User · Answer

Where ever you need to text in one line put this code white-space nowrap

User · Answer

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

User · Answer

Try   td  th     white-space  nowrap    overflow  hidden

User · Answer

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  lt td gt 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  lt tr gt    Otherwise  the browser has to receive the entire table before it can compute the column widths

User · Answer

Use position absolute  and width xxx   on the td-Element

User · Answer

Try   td  th     white-space  nowrap    overflow  hidden

User · Answer

Where ever you need to text in one line put this code white-space nowrap

User · Answer

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    lt table width  300px  gt   lt tr gt       lt td gt Column 1 lt  td gt  lt td gt Column 2 lt  td gt   lt  tr gt   lt tr gt      lt td class  column-1  gt this is the text in column one which wraps lt  td gt      lt td gt this is the column two test lt  td gt   lt  tr gt   lt  table gt    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

User · Answer

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  lt td gt 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  lt tr gt    Otherwise  the browser has to receive the entire table before it can compute the column widths

User · Answer

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     lt table width  20   border  1  STYLE  position  absolute  top  100   gt   lt tr gt    lt td width  100   gt  lt DIV STYLE  position  relative  height  14px  top  0px  width 100    gt   lt 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   gt   lt NOBR gt fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident  that all people are created equal  lt  NOBR gt  lt  DIV gt   lt  DIV gt    lt  td gt   lt  tr gt   lt  table gt    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

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

Update

Update 2

Examples related to javascript

Examples related to html

Examples related to css