HTML Table width in percentage table rows separated equally

Question

When I create a table in html  a table with a width of 100   if I want all the cells  tds  to be divided in equal parts  do I have to enter the width   for each cell  Am I  obliged  to do it   E g     lt table cellpadding  0  cellspacing  0  width  100   border  0  gt      lt tr gt         lt td width  25   gt  lt  td gt         lt td width  25   gt  lt  td gt         lt td width  25   gt  lt  td gt         lt td width  25   gt  lt  td gt      lt  tr gt   lt  table gt    OR the following could also be the right procedure  not to write the width in each tds if I want each of them to be devided equally    lt table cellpadding  0  cellspacing  0  width  100   border  0  gt      lt tr gt         lt td gt  lt  td gt         lt td gt  lt  td gt         lt td gt  lt  td gt         lt td gt  lt  td gt      lt  tr gt   lt  table gt    I know it works with both manners but I just want to know the  legit  way to do it

User · Answer

Use the property table-layout fixed  on the table to get equally spaced cells  If a column has a width set  then no matter what the content is  it will be the specified width  Columns without a width set will divide whatever room is left over among themselves    lt table style  table-layout fixed   gt       lt tbody gt           lt tr gt               lt td gt gobble de gook lt  td gt               lt td gt mibs lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt    Just to throw it out there  you could also use  lt colgroup gt  lt col span     style  width       gt  lt  colgroup gt   which doesn t require repetition of style per table data or giving the table an id to use in a style sheet  I think setting the widths on the first row is enough though

User · Answer

You need to enter the width   for each cell  But wait  there s a better way to do that  it s called CSS    lt style gt        equalDivide tr td   width 25      lt  style gt    lt table class  equalDivide  cellpadding  0  cellspacing  0  width  100   border  0  gt      lt tr gt         lt td gt  lt  td gt         lt td gt  lt  td gt         lt td gt  lt  td gt         lt td gt  lt  td gt      lt  tr gt   lt  table gt

User · Answer

This is definitely the cleanest answer to the question  https   stackoverflow com a 14025331 1008519  In combination with table-layout  fixed I often find  lt colgroup gt  a great tool to make columns act as you want  see codepen here     x000D   x000D  table   x000D      When set to  fixed   all columns that do not have a width applied will get the remaining space divided between them equally    x000D   table-layout  fixed  x000D    x000D   fixed-width   x000D    width  100px  x000D    x000D   col-12   x000D    width  100   x000D    x000D   col-11   x000D    width  91 666666667   x000D    x000D   col-10   x000D    width  83 333333333   x000D    x000D   col-9   x000D    width  75   x000D    x000D   col-8   x000D    width  66 666666667   x000D    x000D   col-7   x000D    width  58 333333333   x000D    x000D   col-6   x000D    width  50   x000D    x000D   col-5   x000D    width  41 666666667   x000D    x000D   col-4   x000D    width  33 333333333   x000D    x000D   col-3   x000D    width  25   x000D    x000D   col-2   x000D    width  16 666666667   x000D    x000D   col-1   x000D    width  8 3333333333   x000D    x000D   x000D     Stylistic improvements from here    x000D   x000D   align-left   x000D    text-align  left  x000D    x000D   align-right   x000D    text-align  right  x000D    x000D  table   x000D    width  100   x000D    x000D  table  gt  tbody  gt  tr  gt  td  x000D  table  gt  thead  gt  tr  gt  th   x000D    padding  8px  x000D    border  1px solid gray  x000D    x000D   lt table cellpadding  0  cellspacing  0  border  0  gt  x000D     lt colgroup gt  x000D       lt col   gt   lt  -- take up rest of the space -- gt  x000D       lt col class  fixed-width    gt   lt  -- fixed width -- gt  x000D       lt col class  col-3    gt   lt  -- percentage width -- gt  x000D       lt col   gt   lt  -- take up rest of the space -- gt  x000D     lt  colgroup gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th class  align-left  gt Title lt  th gt  x000D         lt th class  align-right  gt Count lt  th gt  x000D         lt th class  align-left  gt Name lt  th gt  x000D         lt th class  align-left  gt Single lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td class  align-left  gt This is a very looooooooooong title that may break into multiple lines lt  td gt  x000D         lt td class  align-right  gt 19 lt  td gt  x000D         lt td class  align-left  gt Lisa McArthur lt  td gt  x000D         lt td class  align-left  gt No lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td class  align-left  gt This is a shorter title lt  td gt  x000D         lt td class  align-right  gt 2 lt  td gt  x000D         lt td class  align-left  gt John Oliver Nielson McAllister lt  td gt  x000D         lt td class  align-left  gt Yes lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D   lt table cellpadding  0  cellspacing  0  border  0  gt  x000D     lt  -- define everything with percentage width -- gt  x000D     lt colgroup gt  x000D       lt col class  col-6    gt  x000D       lt col class  col-1    gt  x000D       lt col class  col-4    gt  x000D       lt col class  col-1    gt  x000D     lt  colgroup gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th class  align-left  gt Title lt  th gt  x000D         lt th class  align-right  gt Count lt  th gt  x000D         lt th class  align-left  gt Name lt  th gt  x000D         lt th class  align-left  gt Single lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td class  align-left  gt This is a very looooooooooong title that may break into multiple lines lt  td gt  x000D         lt td class  align-right  gt 19 lt  td gt  x000D         lt td class  align-left  gt Lisa McArthur lt  td gt  x000D         lt td class  align-left  gt No lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td class  align-left  gt This is a shorter title lt  td gt  x000D         lt td class  align-right  gt 2 lt  td gt  x000D         lt td class  align-left  gt John Oliver Nielson McAllister lt  td gt  x000D         lt td class  align-left  gt Yes lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Yes  you will need to specify the width for each cell  otherwise they will try to be  intelligent  about it and divide the 100  between whichever cells think they need it most   Cells with more content will take up more width than those with less   To make sure you get equal width for each cell you need to make it clear  Either do it as you already have  or use CSS   table className td   width  25

User · Answer

you can try this  I would do it with CSS  but i think you want it with tables without CSS    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt      lt body leftmargin 0 rightmargin 0 gt         lt table cellpadding  0  cellspacing  0  width  100   border  1  height  350px  gt             lt tr gt               lt td width  25   gt  amp nbsp  lt  td gt               lt td width  25   gt  amp nbsp  lt  td gt               lt td width  25   gt  amp nbsp  lt  td gt               lt td width  25   gt  amp nbsp  lt  td gt            lt  tr gt         lt  table gt       lt  body gt   lt  html gt

[html] HTML Table width in percentage, table rows separated equally

Examples related to html

Examples related to html-table