85

How do I make columns of equal width in <table>?

I am dynamically changing the number of columns. Today I have 13 columns. Tomorrow it will be raised to 16. I do not particularly want to recalculate.

mareoraft
  • 3,474
  • 4
  • 26
  • 62
Michael Phelps
  • 3,451
  • 7
  • 36
  • 64

3 Answers3

158

I think that this will do the trick:

table{
    table-layout: fixed;
    width: 300px;
}
AdamL
  • 12,421
  • 5
  • 50
  • 74
  • 22
    @DivyaBhalodiya 1. If there's a duplicate, then it's the question, not the answer. I don't necessarily have to check for similar questions every time I post an answer. Flag the question as duplicate if you feel like it. 2. How do you know it was copied, because of 300px? 200px or 300px would be quite popular choice for a off the top of one's head size for a table, don't you think? – AdamL Dec 04 '13 at 13:30
  • 3
    Fast, simple and useful. – Alberto Oct 01 '14 at 14:50
15

Use following property same as table and its fully dynamic: 

ul {
    width: 100%;
    display: table;
    table-layout: fixed; /* optional, for equal spacing */
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid pink;
    vertical-align: middle;
}
<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz klxjgkldjklg </li>
  <li>baz</li>
  <li>baz lds.jklklds</li>
</ul>

May be its solve your issue.

sergdenisov
  • 8,327
  • 9
  • 48
  • 63
Divya Bhaloidiya
  • 5,018
  • 2
  • 25
  • 45
  • 22
    Why do you suggest using a list with table css instead of plain tables? Maybe tabular data (or similiar) are just what the OP needs to layout? Just because css and divs have replaced tables for page layouts does not mean that table is an obsolete element. – Anders Östman Apr 17 '15 at 07:50
7

Found this on HTML table: keep the same width for columns

If you set the style table-layout: fixed; on your table, you can override the browser's automatic column resizing. The browser will then set column widths based on the width of cells in the first row of the table. Change your to and remove the inside of it, and then set fixed widths for the cells in .

Community
  • 1
  • 1
Nitin Varpe
  • 10,450
  • 6
  • 36
  • 60