CSS table td width - fixed not flexible

Question

I have a table and I want to set a fixed width of 30px on the td s  the problem is that when the text in the td is too long  the td is stretched out wider than 30px  Overflow hidden doesn t work either on the td s  I need some way of hiding the overflowing text and keeping the td width 30px    lt table cellpadding  0  cellspacing  0  gt       lt tr gt           lt td gt first lt  td gt  lt td gt second lt  td gt  lt td gt third lt  td gt  lt td gt forth lt  td gt       lt  tr gt       lt tr gt           lt td gt first lt  td gt  lt td gt this is really long lt  td gt  lt td gt third lt  td gt  lt td gt forth lt  td gt       lt  tr gt   lt  table gt

User · Accepted Answer

It s not the prettiest CSS  but I got this to work   table td       width  30px      overflow  hidden      display  inline-block      white-space  nowrap      Examples  with and without ellipses     x000D   x000D  body   x000D      font-size  12px  x000D      font-family  Tahoma  Helvetica  sans-serif  x000D    x000D   x000D  table   x000D      border  1px solid  555  x000D      border-width  0 0 1px 1px  x000D    x000D  table td   x000D      border  1px solid  555  x000D      border-width  1px 1px 0 0  x000D    x000D   x000D     What you need     x000D  table td   x000D      width  30px  x000D      overflow  hidden  x000D      display  inline-block  x000D      white-space  nowrap  x000D    x000D   x000D  table with-ellipsis td      x000D      text-overflow  ellipsis  x000D    x000D   lt table cellpadding  2  cellspacing  0  gt  x000D       lt tr gt  x000D           lt td gt first lt  td gt  lt td gt second lt  td gt  lt td gt third lt  td gt  lt td gt forth lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt first lt  td gt  lt td gt this is really long lt  td gt  lt td gt third lt  td gt  lt td gt forth lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   lt br   gt  x000D   x000D   lt table class  with-ellipsis  cellpadding  2  cellspacing  0  gt  x000D       lt tr gt  x000D           lt td gt first lt  td gt  lt td gt second lt  td gt  lt td gt third lt  td gt  lt td gt forth lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt first lt  td gt  lt td gt this is really long lt  td gt  lt td gt third lt  td gt  lt td gt forth lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

This workaround worked for me      lt td style  white-space  normal  width 300px   gt

User · Answer

Put a div inside td and give following style width 50px overflow  hidden  to the div Jsfiddle link     lt td gt     lt div style  width 50px overflow  hidden   gt        lt span gt A long string more than 50px wide lt  span gt     lt  div gt   lt  td gt

User · Answer

It is not only the table cell which is growing  the table itself can grow  too  To avoid this you can assign a fixed width to the table which in return forces the cell width to be respected   table     table-layout  fixed    width  120px     Important      td     width  30px       Using overflow  hidden and or text-overflow  ellipsis is optional but highly recommended for a better visual experience   So if your situation allows you to assign a fixed width to your table  this solution might be a better alternative to the other given answers  which do work with or without a fixed width

User · Answer

Just divide the number of td to 100   Example  you have 4 td s    lt html gt   lt table gt   lt tr gt   lt td style  width 25   gt This is a text lt  td gt   lt td style  width 25   gt This is some text  this is some text lt  td gt   lt td style  width 25   gt This is another text  this is another text lt  td gt   lt td style  width 25   gt This is the last text  this is the last text lt  td gt   lt  tr gt   lt  table gt   lt  html gt    We use 25  in each td to maximize the 100  space of the entire table

User · Answer

Chrome 37  for non fixed table   td       width  30px      max-width  30px      overflow  hidden      first two important  else - its flow away

User · Answer

you also can try to use that   table       table-layout fixed    table td       width  30px      overflow  hidden      text-overflow  ellipsis      http   www w3schools com cssref pr tab table-layout asp

User · Answer

The above suggestions trashed the layout of my table so I ended up using   td     min-width  30px    max-width  30px    overflow  hidden      This is horrible to maintain but was easier than re-doing all the existing css for the site  Hope it helps someone else

[html] CSS table td width - fixed, not flexible

Examples related to html

Examples related to css

Examples related to html-table