HTML Table width in percentage, table rows separated equally

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.:

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:

I know it works with both manners but I just want to know the "legit" way to do it. 38.4k 26 26 gold badges 201 201 silver badges 275 275 bronze badges asked Oct 9, 2011 at 0:00 user977191 user977191 871 2 2 gold badges 9 9 silver badges 11 11 bronze badges

5 Answers 5

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.

   gobble de gook  mibs

Just to throw it out there, you could also use , 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.

answered Dec 24, 2012 at 20:06 Chinoto Vokro Chinoto Vokro 958 8 8 silver badges 17 17 bronze badges

This should be the accepted answer. Will keep equal widths no matter how many cells are within the row.

Commented Jun 5, 2014 at 9:43 Commented Oct 5, 2017 at 15:22

Several attributes of colgroup and col are deprecated, but the tags themselves and their span attributes are not. The attributes were likely deprecated due to them all being purely stylistic, which is what CSS is for, while span is necessary for showing the correct structure, regardless of whether CSS is present.

Commented Jul 1, 2018 at 14:54

You need to enter the width % for each cell. But wait, there's a better way to do that, it's called CSS:

 .equalDivide tr td

2,290 22 22 silver badges 33 33 bronze badges answered Oct 9, 2011 at 0:04 David Tran David Tran 10.5k 5 5 gold badges 49 49 silver badges 64 64 bronze badges

Interesting thank you. So if I have a table divided in 3 cells, I cannot use css width property and I have to use the old method is that it?

Commented Oct 9, 2011 at 0:08

Why not? With 3 cell, you just need to change the width in percentage to 33% instead of 25%. Not absolutely perfect, but almost.

Commented Oct 9, 2011 at 0:10

And if I have dynamic content, and do not know how much space the content would take, is it ok not to enter the widths and leave the browser dynamically divide the cells with the space they take?

Commented Oct 9, 2011 at 0:14

a/ If you don't know how many cell you're dealng with, but still want to keep them equal, I'll help you with javascript. b/ If you don't specify the width, then the browser will devides the space in order to make the table's height smallest. (So, the cell with much data would be larger than the cell with less data)

Commented Oct 9, 2011 at 0:23 sadly, Outlook still pushes ancestral practices for emailing. Commented Feb 5, 2021 at 19:39

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

answered Oct 9, 2011 at 0:11 Nick Brunt Nick Brunt 9,947 11 11 gold badges 57 57 silver badges 84 84 bronze badges

you can try this, I would do it with CSS, but i think you want it with tables without CSS.

805 1 1 gold badge 15 15 silver badges 37 37 bronze badges answered Oct 9, 2011 at 0:12 1,486 2 2 gold badges 10 10 silver badges 29 29 bronze badges

This is definitely the cleanest answer to the question: https://stackoverflow.com/a/14025331/1008519. In combination with table-layout: fixed I often find a great tool to make columns act as you want (see codepen here):

table < /* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */ table-layout: fixed; >.fixed-width < width: 100px; >.col-12 < width: 100%; >.col-11 < width: 91.666666667%; >.col-10 < width: 83.333333333%; >.col-9 < width: 75%; >.col-8 < width: 66.666666667%; >.col-7 < width: 58.333333333%; >.col-6 < width: 50%; >.col-5 < width: 41.666666667%; >.col-4 < width: 33.333333333%; >.col-3 < width: 25%; >.col-2 < width: 16.666666667%; >.col-1 < width: 8.3333333333%; >/* Stylistic improvements from here */ .align-left < text-align: left; >.align-right < text-align: right; >table < width: 100%; >table > tbody > tr > td, table > thead > tr > th

           Title  Count  Name  Single  
 
  This is a very looooooooooong title that may break into multiple lines  19  Lisa McArthur  No  
 This is a shorter title  2  John Oliver Nielson McAllister  Yes  
 
 
         Title  Count  Name  Single  
 
  This is a very looooooooooong title that may break into multiple lines  19  Lisa McArthur  No  
 This is a shorter title  2  John Oliver Nielson McAllister  Yes

Title	Count	Name	Single
This is a very looooooooooong title that may break into multiple lines	19	Lisa McArthur	No
This is a shorter title	2	John Oliver Nielson McAllister	Yes