Equal sized table cells to fill the entire width of the containing table

Question

Is there a way using HTML CSS  with relative sizing  to make a row of cells stretch the entire width of the table within which it is contained   The cells should be equal widths and the outer table size is also dynamic with  lt table width  100   gt    Currently if I don t specify a fixed size  the cells just autosize to fit their contents

User · Answer

Using table-layout  fixed as a property for table and width  calc 100  3   for td  assuming there are 3 td s   With these two properties set  the table cells will be equal in size   Refer to the demo

User · Answer

Just use percentage widths and fixed table layout    lt table gt   lt tr gt     lt td gt 1 lt  td gt     lt td gt 2 lt  td gt     lt td gt 3 lt  td gt   lt  tr gt   lt  table gt    with  table   table-layout  fixed    td   width  33       Fixed table layout is important as otherwise the browser will adjust the widths as it sees fit if the contents don t fit ie the widths are otherwise a suggestion not a rule without fixed table layout   Obviously  adjust the CSS to fit your circumstances  which usually means applying the styling only to a tables with a given class or possibly with a given ID

User · Answer

You don t even have to set a specific width for the cells  table-layout  fixed suffices to spread the cells evenly    x000D   x000D  ul   x000D      width  100   x000D      display  table  x000D      table-layout  fixed  x000D      border-collapse  collapse  x000D    x000D  li   x000D      display  table-cell  x000D      text-align  center  x000D      border  1px solid hotpink  x000D      vertical-align  middle  x000D      word-wrap  break-word  x000D    x000D   lt ul gt  x000D     lt li gt foo lt br gt foo lt  li gt  x000D     lt li gt barbarbarbarbar lt  li gt  x000D     lt li gt baz lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D       Note that for table-layout to work the table styled element must have a width set  100  in my example

[html] Equal sized table cells to fill the entire width of the containing table

Examples related to html

Examples related to css

Examples related to html-table