How can I set the max-width of a table cell using percentages

Question

lt table gt   lt tr gt   lt td gt Test lt  td gt   lt td gt A long string blah blah blah lt  td gt   lt  tr gt   lt  table gt    lt style gt  td max-width 67     lt  style gt    The above does not work  How can I set the max-width of a table cell using percentages

User · Accepted Answer

According to the definition of max-width in the CSS 2.1 spec, “the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.” So you cannot directly set max-width on a td element.

If you just want the second column to take up at most 67%, then you can set the width (which is in effect minimum width, for table cells) to 33%, e.g. in the example case

td:first-child { width: 33% ;}

Setting that for both columns won’t work that well, since it tends to make browsers give the columns equal width.

User · Answer

the percent should be relative to an absolute size  try this    x000D   x000D  table     width 200px     td     width 65     border 1px solid black    x000D   lt table gt     lt tr gt       lt td gt Testasdas 3123 1 dasd as da lt  td gt       lt td gt A long string blah blah blah lt  td gt     lt  tr gt   lt  table gt       x000D   x000D   x000D

User · Answer

I know this is literally a year later  but I figured I d share   I was trying to do the same thing and came across this solution that worked for me   We set a max width for the entire table  then worked with the cell sizes for the desired effect  Put the table in its own div  then set the width  min-width  and or max-width of the div as desired for the entire table   Then  you can work and set width and min-widths for other cells  and max width for the div effectively working around and backwards to achieve the max width we wanted   x000D   x000D   tablediv       width 90       min-width 800px     max-width 1500px      tdleft       width 20       min-width 200px    x000D   lt div id  tablediv  gt     lt table width  100   border  1  gt       lt tr gt         lt td class  tdleft  gt Test lt  td gt         lt td gt A long string blah blah blah lt  td gt       lt  tr gt     lt  table gt   lt  div gt  x000D   x000D   x000D   Admittedly  this does not give you a  quot max quot  width of a cell per se  but it does allow some control that might work in-lieu of such an option   Not sure if it will work for your needs   I know it worked for our situation where we want the navigation side in the page to scale up and down to a point but for all the wide screens these days

User · Answer

Old question I know  but this is now possible using the css property table-layout  fixed on the table tag  Answer below from this question CSS percentage width and text-overflow in a table cell  This is easily done by using table-layout  fixed  but a little tricky because not many people know about this CSS property   table     width  100     table-layout  fixed      See it in action at the updated fiddle here  http   jsfiddle net Fm5bM 4

[html] How can I set the max-width of a table cell using percentages?

Examples related to html

Examples related to css

Examples related to html-table