Table columns setting both min and max width with css

Question

I would like to have a table which in the columns can stretch but I m having a little trouble with min and max width in css    It also seems that theres some conflicting answers around how this works    min max width should work  Prevent text from overlap table td width min max width are unsupported  Min-width and max-height for table attributes   I would like to have the following  table     width 100      a   b   c       background-color  red     a       min-width  10px      max-width  20px     b       min-width  40px      max-width  45px     c       lt table gt       lt tr gt           lt td class  a  gt A lt  td gt           lt td class  b  gt B lt  td gt           lt td class  c  gt C lt  td gt       lt  tr gt   lt  table gt    Is there a way of achieving this without javascript  ie constrained stretching of columns with a table     I only need this to work with CSS3   HTML5 a jsfiddle with stuff not expanding  http   jsfiddle net 4b3RZ 10  if I set only min-width on the columns i get a proportional stretch http   jsfiddle net 4b3RZ 8    below is a table of what actually gets rendered for some different css setups

User · Accepted Answer

Tables work differently  sometimes counter-intuitively   The solution is to use width on the table cells instead of max-width   Although it may sound like in that case the cells won t shrink below the given width  they will actually  with no restrictions on c  if you give the table a width of 70px  the widths of a  b and c will come out as 16  42 and 12 pixels  respectively  With a table width of 400 pixels  they behave like you say you expect in your grid above  Only when you try to give the table too small a size  smaller than a min b min the content of C  will it fail  then the table itself will be wider than specified   I made a snippet based on your fiddle  in which I removed all the borders and paddings and border-spacing  so you can measure the widths more accurately    x000D   x000D  table   x000D    width  70px  x000D    x000D   x000D  table  tbody  tr  td   x000D    margin  0  x000D    padding  0  x000D    border  0  x000D    border-spacing  0  x000D    x000D   x000D   a   c   x000D    background-color  red  x000D    x000D   x000D   b   x000D    background-color   F77  x000D    x000D   x000D   a   x000D    min-width  10px  x000D    width  20px  x000D    max-width  20px  x000D    x000D   x000D   b   x000D    min-width  40px  x000D    width  45px  x000D    max-width  45px  x000D    x000D   x000D   c    x000D   lt table gt  x000D     lt tr gt  x000D       lt td class  a  gt A lt  td gt  x000D       lt td class  b  gt B lt  td gt  x000D       lt td class  c  gt C lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

[html] Table columns, setting both min and max width with css

Examples related to html

Examples related to css

Examples related to html-table