HTML CSS How to stop a table cell from expanding

Question

I have a table which is built with the contents coming from a returned dataset   What I want to do is stop a  description  cell from expanding over 280px wide  no matter what the content length  its s string    I have tried    lt td align  left  valign  top  style  overflow hidden   nowrap  nowrap  width  280px   gt    But this doesn t seem to work   I don t want it to wrap  nor do I want anything over 280px to be displayed

User · Answer

This could be useful  Like another answer it is just CSS   td       word-wrap  break-word

User · Answer

It appears that your HTML syntax is incorrect for the table cell   Before you try the other idea below  confirm if this works or not     You can also try adding this to your table itself  table-layout fixed        lt td style  overflow  hidden  width  280px  text-align  left  valign  top  whitespace  nowrap   gt      content   lt  td gt    New HTML     lt td gt      lt div class  MyClass   gt          content      lt  div gt   lt  td gt    CSS Class    MyClass     height  280px      width  456px      overflow  hidden     white-space  nowrap

User · Answer

Simply set the max-width attribute to 280px like this     lt td align  left  valign  top  style  overflow hidden   nowrap  nowrap  max-width  280px  width  280px  gt    This will solve your problem

User · Answer

lt table border  1  width  183  style  table-layout fixed  gt     lt col width  67  gt     lt col width  75  gt     lt col width  41  gt     lt tr gt       lt td gt First Column lt  td gt       lt td gt Second Column lt  td gt       lt td gt Third Column lt  td gt     lt  tr gt     lt tr gt       lt td gt Row 1 lt  td gt       lt td gt Text lt  td gt       lt td align  right  gt 1 lt  td gt     lt  tr gt     lt tr gt       lt td gt Row 2 lt  td gt       lt td gt Abcdefg lt  td gt       lt td align  right  gt 123 lt  td gt     lt  tr gt     lt tr gt       lt td gt Row 3 lt  td gt       lt td gt Abcdefghijklmnop lt  td gt       lt td align  right  gt 123456 lt  td gt     lt  tr gt   lt  table gt    I know it s old school  but give that a try  it works   may also want to add this    lt style gt    td  overflow hidden    lt  style gt    Of course  you d put this in a separate linked stylesheet  and not inline    wouldn t you

User · Answer

It s entirely possible if your code has enough relative logic to work with   Simply use the viewport units though for some the math may be a bit more complicated  I used this to prevent list items from bloating certain table columns with much longer text   ol  max-width  10vw  padding  0  overflow  hidden     Apparently max-width on colgroup elements do not work which is pretty lame to be dependent entirely on child elements to control something on the parent

User · Answer

To post Chris Dutrow s comment here as answer   style  table-layout fixed      in the style of the table itself is what worked for me  Thanks Chris   Full example    lt table width  55  height  55  border  0  cellspacing  0  cellpadding  0  style  border-radius 50   border 0px solid  000000 table-layout fixed  align  center  bgcolor   152b47  gt     lt tbody gt       lt td style  color  ffffff font-family TW-Averta-Regular Averta Helvetica Arial font-size 11px overflow hidden width 55px text-align center valign top whitespace nowrap   gt        Your table content here       lt  td gt     lt  tbody gt   lt  table gt

User · Answer

No javascript  just CSS  Works fine        no-break-out            These are technically the same  but use both          overflow-wrap  break-word        word-wrap  break-word         -ms-word-break  break-all           This is the dangerous one in WebKit  as it breaks things wherever          word-break  break-all           Instead use this non-standard one           word-break  break-word            Adds a hyphen where the word breaks  if supported  No Blink           -ms-hyphens  auto        -moz-hyphens  auto        -webkit-hyphens  auto        hyphens  auto

[html] HTML CSS How to stop a table cell from expanding

Examples related to html

Examples related to css