CSS Truncate table cells but fit as much as possible

Question

Meet Fred  He s a table      lt table border  1  style  width  100    gt       lt tr gt           lt td gt This cells has more content lt  td gt           lt td gt Less content here lt  td gt       lt  tr gt   lt  table gt    Fred s apartment has a bizarre habit of changing size  so he s learned to hide some of his content so as not to push all the other units over and shove Mrs  Whitford s living room off into oblivion      lt table border  1  style  width  100   white-space  nowrap  table-layout  fixed   gt       lt tr gt           lt td style  overflow  hidden  text-overflow  ellipsis  gt This cells has more content lt  td gt           lt td style  overflow  hidden  text-overflow  ellipsis  gt Less content here lt  td gt       lt  tr gt   lt  table gt    This works  but Fred has a nagging feeling that if his right cell  which he s nicknamed Celldito  gave up a little space  his left cell wouldn t be truncated quite as much of the time  Can you save his sanity     In summary  How can a table s cells overflow evenly  and only when they ve all given up all their whitespace

User · Answer

You could try to  weight  certain columns  like this    lt table border  1  style  width  100    gt       lt colgroup gt           lt col width  80     gt           lt col width  20     gt       lt  colgroup gt       lt tr gt           lt td gt This cell has more content  lt  td gt           lt td gt Less content here  lt  td gt       lt  tr gt   lt  table gt    You can also try some more interesting tweaks  like using 0 -width columns and using some combination of the white-space CSS property    lt table border  1  style  width  100    gt       lt colgroup gt           lt col width  100     gt           lt col width  0     gt       lt  colgroup gt       lt tr gt           lt td gt This cell has more content  lt  td gt           lt td style  white-space  nowrap   gt Less content here  lt  td gt       lt  tr gt   lt  table gt    You get the idea

User · Answer

The problem is the  table-layout fixed  which create evenly-spaced-fixed-width columns  But disabling this css-property will kill the text-overflow because the table will become as large as possible  and than there is noting to overflow    I m sorry but in this case Fred can t have his cake and eat it to   unless the landlord gives Celldito less space to work with in the first place  Fred cannot use his

User · Answer

Use some css hack  it seems the display  table-column  can come to rescue    lt div class  myTable  gt       lt div class  flexibleCell  gt A very long piece of content in first cell  long enough that it would normally wrap into multiple lines  lt  div gt       lt div class  staticCell  gt Less content lt  div gt   lt  div gt       myTable       display  table      width  100       myTable before       display  table-column      width  100       content          flexibleCell       display  table-cell      max-width 1px      white-space  nowrap      text-overflow ellipsis      overflow  hidden      staticCell       white-space  nowrap      JSFiddle  http   jsfiddle net blai 7u59asyp

User · Answer

Yep I would say thirtydot has it  there is no way to do it unless you use a js method  You are talking about a complex set of rendering conditions that you will have to define  e g  what happens when both cells are getting too big for their apartments you will have to decide who has priority or simply just give them a percentage of the area and if they are overfull they will both take up that area and only if one has whitespace will you stretch your legs in the other cell  either way there is no way to do it with css  Although there are some pretty funky things people do with css that I have not thought of  I really doubt you can do this though

User · Answer

If Javascript is acceptable  I put together a quick routine which you could use as a starting point   It dynamically tries to adapt the cell widths using the inner width of a span  in reaction to window resize events     Currently it assumes that each cell normally gets 50  of the row width  and it will collapse the right cell to keep the left cell at its maximum width to avoid overflowing   You could implement much more complex width balancing logic  depending on your use cases  Hope this helps   Markup for the row I used for testing    lt tr class  row  gt       lt td style  overflow  hidden  text-overflow  ellipsis  gt       lt span gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  span gt       lt  td gt       lt td style  overflow  hidden  text-overflow  ellipsis  gt       lt span gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  lt  span gt       lt  td gt   lt  tr gt    JQuery which hooks up the resize event     window  resize function             row   each function             var row width     this  width            var cols     this  find  td            var left   cols 0           var lcell width     left  width            var lspan width     left  find  span   width            var right   cols 1           var rcell width     right  width            var rspan width     right  find  span   width             if  lcell width  lt  lspan width                  left  width row width - rcell width             else if  rcell width  gt  rspan width                  left  width row width   2

User · Answer

I ve been recently working on it  Check out this jsFiddle test  try it yourself changing the width of the base table to check the behavior    The solution is to embedded a table into another    lt table style  width  200px border 0 border-collapse collapse  gt       lt tbody gt           lt tr gt               lt td style  width  100    gt                   lt table style  width  100  border 0 border-collapse collapse  gt                       lt tbody gt                           lt tr gt                               lt td gt                                   lt div style  position  relative overflow hidden  gt                                       lt p gt  amp nbsp  lt  p gt                                       lt p style  overflow hidden text-overflow  ellipsis position  absolute  top  0pt  left  0pt width 100   gt This cells has more content lt  p gt                                   lt  div gt                               lt  td gt                           lt  tr gt                       lt  tbody gt                   lt  table gt               lt  td gt               lt td style  white-space nowrap  gt Less content here lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt    Is Fred now happy with Celldito s expansion

User · Answer

Simply add the following rules to your td   overflow  hidden  text-overflow  ellipsis  white-space  nowrap     These ones do the trick width  100   max-width  0    Example    x000D   x000D  table   x000D    width  100  x000D    x000D   x000D  td   x000D    white-space  nowrap  x000D    x000D   x000D   td-truncate   x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D    width  100   x000D    max-width  0  x000D    x000D   lt table border  1  gt  x000D     lt tr gt  x000D       lt td gt content lt  td gt  x000D       lt td class  td-truncate  gt long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt lt  td gt  x000D       lt td gt other content lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    PS  If you want to set a custom width to another td use property min-width

User · Answer

Don t know if this will help anyone  but I solved a similar problem by specifying specific width sizes in percentage for each column  Obviously  this would work best if each column has content with width that doesn t vary too widely

User · Answer

I had the same issue  but I needed to display multiple lines  where text-overflow  ellipsis  fails   I solve it using a textarea inside a TD and then style it to behave like a table cell       textarea           margin  0          padding  0          width  100           border  none          resize  none              Remove blinking cursor  text caret             color  transparent          display  inline-block          text-shadow  0 0 0 black     text color is set to transparent so use text shadow to draw the text             amp  focus               outline  none

User · Answer

I ve been faced the same challenge few days ago  It seems Lucifer Sam found the best solution   But I noticed you should duplicate content at spacer element  Thought it s not so bad  but I d like also to apply title popup for clipped text  And it means long text will appear third time in my code   Here I propose to access title attribute from  after pseudo-element to generate spacer and keep HTML clean   Works on IE8   FF  Chrome  Safari  Opera   lt table border  1  gt     lt tr gt       lt td class  ellipsis cell  gt         lt div title  This cells has more content  gt           lt span gt This cells has more content lt  span gt         lt  div gt       lt  td gt       lt td class  nowrap  gt Less content here lt  td gt     lt  tr gt   lt  table gt     ellipsis cell  gt  div       position  relative      overflow  hidden      height  1em        visible content     ellipsis cell  gt  div  gt  span       display  block      position  absolute       max-width  100       white-space  nowrap      overflow  hidden      text-overflow  ellipsis      line-height  1em        spacer content     ellipsis cell  gt  div after       content  attr title       overflow  hidden      height  0      display  block      http   jsfiddle net feesler HQU5J

User · Answer

Like samplebias answer  again if Javascript is an acceptable answer  I made a jQuery plugin specifically for this purpose  https   github com marcogrcr jquery-tableoverflow  To use the plugin just type     selector   tableoverflow      Full example  http   jsfiddle net Cw7TD 3 embedded result   Edits    Fix in jsfiddle for IE compatibility  Fix in jsfiddle for better browser compatibility  Chrome  Firefox  IE8

User · Answer

lt table border  1  style  width  100    gt       lt colgroup gt           lt col width  100     gt           lt col width  0     gt       lt  colgroup gt       lt tr gt           lt td style  white-space  nowrap  text-overflow ellipsis  overflow  hidden  max-width 1px   gt This cell has more content This cell has more content This cell has more content This cell has more content This cell has more content This cell has more content  lt  td gt           lt td style  white-space  nowrap   gt Less content here  lt  td gt       lt  tr gt   lt  table gt    http   jsfiddle net 7CURQ

User · Answer

Given that  table-layout fixed  is the essential layout requirement  that this creates evenly spaced non-adjustable columns  but that you need to make cells of different percentage widths  perhaps set the  colspan  of your cells to a multiple   For example  using a total width of 100 for easy percentage calculations  and saying that you need one cell of 80  and another of 20   consider    lt TABLE width 100  style  table-layout fixed white-space nowrap overflow hidden   gt        lt tr gt             lt td colspan 100 gt                 text across entire width of table            lt  td gt        lt tr gt             lt td colspan 80 gt                 text in lefthand bigger cell            lt  td gt             lt td colspan 20 gt                 text in righthand smaller cell            lt  td gt   lt  TABLE gt    Of course  for columns of 80  and 20   you could just set the 100  width cell colspan to 5  the 80  to 4  and the 20  to 1

User · Answer

Check if  nowrap  solve the issue to an extent  Note  nowrap is not supported in HTML5   lt table border  1  style  width  100   white-space  nowrap  table-layout  fixed   gt   lt tr gt       lt td style  overflow  hidden  text-overflow  ellipsis   nowrap  gt This cells has more content   lt  td gt       lt td style  overflow  hidden  text-overflow  ellipsis   nowrap  gt Less content here has more content lt  td gt   lt  tr gt

User · Answer

There s a much easier and more elegant solution   Within the table-cell that you want to apply truncation  simply include a container div with css table-layout  fixed  This container takes the full width of the parent table cell  so it even acts responsive   Make sure to apply truncation to the elements in the table   Works from IE8    lt table gt     lt tr gt       lt td gt        lt div class  truncate  gt          lt h1 class  truncated  gt I m getting truncated because I m way too long to fit lt  h1 gt        lt  div gt       lt  td gt       lt td class  some-width  gt         I m just text      lt  td gt     lt  tr gt   lt  table gt    and css        truncate         display  table        table-layout  fixed        width  100              h1 truncated         overflow-x  hidden        text-overflow  ellipsis        white-space  nowrap          here s a working Fiddle https   jsfiddle net d0xhz8tb

User · Answer

you can set the width of right cell to minimum of required width  then apply overflow-hidden text-overflow to the  inside of left cell  but Firefox is buggy here     although  seems  flexbox can help

User · Answer

I believe I have a non-javascript solution  Better late than never  right  After all this is an excellent question and Google is all over it  I didn t want to settle for a javascript fix because I find the slight jitter of things moving around after the page is loaded to be unacceptable   Features    No javascript No fixed-layout No weighting or percentage-width tricks Works with any number of columns Simple server-side generation and client-side updating  no calculation necessary  Cross-browser compatible   How it works  Inside the table cell place two copies of the content in two different elements within a relatively-positioned container element  The spacer element is statically-positioned and as such will affect the width of the table cells  By allowing the contents of the spacer cell to wrap we can get the  best-fit  width of the table cells that we are looking for  This also allows us to use the absolutely-positioned element to restrict the width of the visible content to that of the relatively-positioned parent   Tested and working in  IE8  IE9  IE10  Chrome  Firefox  Safari  Opera  Result Images      JSFiddle  http   jsfiddle net zAeA2   Sample HTML CSS    lt td gt       lt  --Relative-positioned container-- gt       lt div class  container  gt           lt  --Visible-- gt           lt div class  content  gt  lt  --Content here-- gt  lt  div gt           lt  --Hidden spacer-- gt           lt div class  spacer  gt  lt  --Content here-- gt  lt  div gt           lt  --Keeps the container from collapsing without             having to specify a height-- gt           lt span gt  amp nbsp  lt  span gt        lt  div gt   lt  td gt    container       position  relative     content       position  absolute      max-width  100       white-space  nowrap      overflow  hidden      text-overflow  ellipsis     spacer       height  0      overflow  hidden

User · Answer

This question pops up top in Google  so in my case  I used the css snippet from https   css-tricks com snippets css truncate-string-with-ellipsis  but applying it to the td did NOT give the desired result   I had to add a div tag around the text in the td and the ellipsis finally worked   Abbreviated HTML Code    lt table style  width 100   gt    lt tr gt       lt td gt  lt div class  truncate  gt Some Long Text Here lt  div gt  lt  td gt    lt  tr gt   lt  table gt    Abbreviated CSS    truncate   width  300px  white-space nowrap  overflow hidden  text-overflow ellipsis

[html] CSS: Truncate table cells, but fit as much as possible

Examples related to html

Examples related to css

Examples related to overflow

Examples related to tablelayout