Force table column widths to always be fixed regardless of contents

Question

I have an html table with table-layout  fixed and a td with a set width   The column still expands to hold the contents of text that doesn t contain a space   Is there a way to fix this other than wrapping the contents of each td in a div   Example  http   jsfiddle net 6p9K3 29    lt table gt       lt tbody gt           lt tr gt               lt td style  width  50px   gt Test lt  td gt               lt td gt Testing 1123455 lt  td gt           lt  tr gt  lt tr gt               lt td style  width  50px   gt AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA lt  td gt               lt td gt B lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt   table       table-layout  fixed     td       border  1px solid green      overflow  hidden      In the example  you can see that the column with AAAAAAAAAAAA    expands despite being explicitly set to 50px wide

User · Accepted Answer

Specify the width of the table   table       table-layout  fixed      width  100px      See jsFiddle

User · Answer

You can also work with  overflow  hidden  or  overflow-x  hidden   for just the width   This requires a defined width  and or height   and maybe a  display  block  as well     Overflow Hidden  hides the whole content  which does not fit into the defined box   Example   http   jsfiddle net NAJvp   HTML    lt table border  1  gt       lt tr gt           lt td gt  lt div gt aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa lt  div gt  lt  td gt           lt td gt bbb lt  td gt           lt td gt cccc lt  td gt       lt  tr gt   lt  table gt    CSS   td div   width  100px  overflow-y  hidden      EDIT  Shame on me  I ve seen  you already use  overflow   I guess it doesn t work  because you don t set  display  block  to your element

User · Answer

This works for me  td  after    content       display  block   width  30px

User · Answer

Try looking into the following CSS    word-wrap break-word    Web browsers should not break-up  words  by default so what you are experiencing is normal behaviour of a browser  However you can override this with the word-wrap CSS directive   You would need to set a width on the overall table then a width on the columns   width 100    should also be OK depending on your requirements   Using word-wrap may not be what you want however it is useful for showing all of the data without deforming the layout

User · Answer

I would try setting it to max-width 50px

User · Answer

Make the table rock solid BEFORE the css  Figure your width of the table  then use a  controlling  row whereby each td has an explicit width  all of which add up to the width in the table tag   Having to do hundreds html emails to work everywhere  using the correct HTML first  then styling w css will work around many issues in all IE s  webkit s and mozillas   so    lt table width  300  cellspacing  0  cellpadding  0  gt     lt tr gt       lt td width  50  gt  lt  td gt       lt td width  100  gt  lt  td gt       lt td width  150  gt  lt  td gt     lt  tr gt     lt tr gt       lt td gt your stuff lt  td gt       lt td gt your stuff lt  td gt       lt td gt your stuff lt  td gt     lt  tr gt   lt  table gt    Will keep a table at 300px wide  Watch images that are larger than the width by extremes

User · Answer

You can also use percentages  and or specify in the column headers    lt table width  300  gt       lt tr gt       lt th width  20   gt Column 1 lt  th gt       lt th width  20   gt Column 2 lt  th gt       lt th width  20   gt Column 3 lt  th gt       lt th width  20   gt Column 4 lt  th gt       lt th width  20   gt Column 5 lt  th gt     lt  tr gt     lt tr gt       lt  --- row data -- gt     lt  tr gt   lt  table gt    The bonus with percentages is lower code maintenance  you can change your table width without having to re-specify the column widths   Caveat   It is my understanding that table width specified in pixels isn t supported in HTML 5  you need to use CSS instead

User · Answer

You can add a div to the td  then style that   It should work as you expected    lt td gt  lt div gt AAAAAAAAAAAAAAAAAAA lt  div gt  lt  td gt    Then the css   td div   width  50px  overflow  hidden

[html] Force table column widths to always be fixed regardless of contents

Examples related to html

Examples related to css