Set min-width in HTML table s td

Question

My table has several columns    Each column should have dynamic width that depends on the browser window size  On the other hand  each column must not be too tiny  So I tried to set min-width for those columns but it s not a valid property  Tried min-width for  lt td gt  as well but that too is an invalid property   Is there any way to set min-width for col td in HTML table

User · Accepted Answer

try this one   x000D   x000D   lt table style  border 1px solid  gt   lt tr gt       lt td style  min-width 50px  gt one lt  td gt       lt td style  min-width 100px  gt two lt  td gt   lt  tr gt   lt  table gt  x000D   x000D   x000D

User · Answer

lt table style  min-width 50px  max-width 150px   gt       lt tr gt           lt td style  min-width 50px  gt one lt  td gt           lt td style  min-width 100px  gt two lt  td gt       lt  tr gt   lt  table gt    This works for me using an email script

User · Answer

min-width and max-width properties do not work the way you expect for table cells  From spec      In CSS 2 1  the effect of  min-width  and  max-width  on tables  inline tables  table cells  table columns  and column groups is undefined    This hasn t changed in CSS3

User · Answer

Try using an invisible element  or psuedoelement  to force the table-cell to expand   td before     content        display  block     width  5em      JSFiddle  https   jsfiddle net cibulka gf45uxr6 1

User · Answer

lt table style  border 2px solid  ddedde  gt       lt tr gt           lt td style  border 2px solid  ddedde width 50   gt a lt  td gt           lt td style  border 2px solid  ddedde width 20   gt b lt  td gt           lt td style  border 2px solid  ddedde width 30   gt c lt  td gt       lt  tr gt       lt tr gt           lt td style  border 2px solid  ddedde width 50   gt a lt  td gt           lt td style  border 2px solid  ddedde width 20   gt b lt  td gt           lt td style  border 2px solid  ddedde width 30   gt c lt  td gt       lt  tr gt   lt  table gt

User · Answer

None of these solutions worked for me  The only workaround I could find was  adding all the min-width sizes together and applying that to the entire table  This obviously only works if you know all the column sizes in advanced  which I do  My tables look something like this  var columns        label   Column 1   width  80    plus other column config         label   Column 2   minWidth  110    plus other column config         label   Column 3     plus other column config          const minimumTableWidth   columns reduce  sum  column    gt      return sum    column width    column minWidth    0      0    tableElement style minWidth   minimumTableWidth    px    This is an example and not recommended code  Fit the idea to your requirements  For example  the above is javascript and won t work if the user has JS disabled  etc

User · Answer

One way should be to add a  lt div style  min-width XXXpx  gt  within the td  and let the  lt td style  width 100   gt

[html] Set min-width in HTML table's <td>

Examples related to html

Examples related to css

Examples related to html-table