How to hide Table Row Overflow

Question

I have some html tables where the textual data is too large to fit   So  it expands the cell vertically to accommodate for this   So now rows that have the overflow are twice as tall as rows with smaller amounts of data   This is unacceptable   How can I force table to have the same row height of 1em   Here is some markup that reproduces the problem   Table should only be the height of one line  with the overflowing text hidden    lt  DOCTYPE html gt    lt html gt     lt head gt       lt title gt Test lt  title gt       lt meta http-equiv  content-type  content  text html  charset utf-8    gt       lt style type  text css  gt        table   width 250px          table tr   height 1em  overflow hidden         lt  style gt     lt  head gt     lt body gt       lt table border  1  gt         lt tr gt           lt td gt This is a test  lt  td gt           lt td gt Do you see what I mean  lt  td gt           lt td gt I hate this overflow  lt  td gt         lt  tr gt       lt  table gt     lt  body gt   lt  html gt

User · Answer

If javascript is accepted as an answer  I made a jQuery plugin to address this issue  for more information about the issue see CSS  Truncate table cells  but fit as much as possible    To use the plugin just type     selector   tableoverflow      Plugin  https   github com marcogrcr jquery-tableoverflow  Full example  http   jsfiddle net Cw7TD 3 embedded result

User · Answer

Here  s something I tried  Basically  I put the  flexible  content  the td which contains lines that are too long  in a div container that  s one line high  with hidden overflow  Then I let the text wrap into the invisible  You get breaks at wordbreaks though  not just a smooth cut-off   table       width  100       hideend       white-space  normal      overflow  hidden      max-height  1 2em      min-width  50px     showall       white-space nowrap      lt table gt       lt tr gt           lt td gt  lt div class  showall  gt Show all lt  div gt  lt  td gt           lt td gt               lt div class  hideend  gt Be a bit flexible about hiding stuff in a long sentence lt  div gt           lt  td gt           lt td gt               lt div class  showall  gt Show all this too lt  div gt           lt  td gt       lt  tr gt   lt  table gt

User · Answer

In general  if you are using white-space  nowrap  it is probably because you know which columns are going to contain content which wraps  or stretches the cell   For those columns  I generally wrap the cell s contents in a span with a specific class attribute and apply a specific width   Example   HTML    lt td gt  lt span class  description  gt My really long description lt  span gt  lt  td gt    CSS   span description       display  inline-block      overflow  hidden      white-space  nowrap      width  150px

User · Answer

In most modern browsers  you can now specify    lt table gt    lt colgroup gt     lt col width  100px    gt     lt col width  200px    gt     lt col width  145px    gt    lt  colgroup gt    lt thead gt     lt tr gt      lt th gt My 100px header lt  th gt      lt th gt My 200px header lt  th gt      lt th gt My 145px header lt  th gt     lt  tr gt    lt  thead gt    lt tbody gt     lt td gt 100px is all you get - anything more hides due to overflow  lt  td gt     lt td gt 200px is all you get - anything more hides due to overflow  lt  td gt     lt td gt 100px is all you get - anything more hides due to overflow  lt  td gt    lt  tbody gt   lt  table gt    Then if you apply the styles from the posts above  as follows   table       table-layout  fixed     This enforces the  col  widths       table th  table td       overflow  hidden      white-space  nowrap      The result gives you nicely hidden overflow throughout the table  Works in latest Chrome  Safari  Firefox and IE  I haven t tested in IE prior to 9 - but my guess is that it will work back as far as 7  and you might even get lucky enough to see 5 5 or 6 support

User · Answer

Only downside  it seems   is that the   table cell widths are identical  Any   way to get around this      Josh Stodola   Oct 12 at 15 53   Just define width of the table and width for each table cell  something like   table  border-collapse collapse  table-layout fixed  width 900px   th  background  yellow    td  overflow hidden white-space nowrap     cells1 width 300px    cells2 width 500px    cells3 width 200px     It works like a charm  o

User · Answer

Need to specify two attributes  table-layout fixed on table and white-space nowrap  on the cells  You also need to move the overflow hidden  to the cells too  table   width 250px table-layout fixed    table tr   height 1em     td   overflow hidden white-space nowrap        Here s a Demo   Tested in Firefox 3 5 3 and IE 7

User · Answer

wrap the table in a div with class  container   div container       width  100       overflow-x  auto      then    table id tr td      white-space nowrap      result

[html] How to hide Table Row Overflow?

Examples related to html

Examples related to css

Examples related to html-table