How to Make a Table with Equal Column Widths in CSS

Make columns of equal width in table

I think that this will do the trick:

table{
    table-layout: fixed;
    width: 300px;
}

CSS Table uniform column widths

I don't think you can do it with <table>, but you can do it with display: grid.

.a {
  display: inline-block;
}
.a>div {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 2px;
}
.a>div>div {
  border: 1px solid silver;
}

<div class="a">
  <div>
    <div>1</div>
    <div>22</div>
    <div>333</div>
    <div>4444</div>
    <div>55555</div>
    <div>66</div>
    <div>7777</div>
    <div>888888</div>
    <div>99999999</div>
    <div>0000000000</div>
  </div>
</div>

CSS table-cell equal width

Here is a working fiddle with indeterminate number of cells: http://jsfiddle.net/r9yrM/1/

You can fix a width to each parent div (the table), otherwise it'll be 100% as usual.

The trick is to use table-layout: fixed; and some width on each cell to trigger it, here 2%. That will trigger the other table algorightm, the one where browsers try very hard to respect the dimensions indicated.

Please test with Chrome (and IE8- if needed). It's OK with a recent Safari but I can't remember the compatibility of this trick with them.

CSS (relevant instructions):

div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

EDIT (2013): Beware of Safari 6 on OS X, it has table-layout: fixed; wrong (or maybe just different, very different from other browsers. I didn't proof-read CSS2.1 REC table layout ;) ). Be prepared to different results.

Table with 100% width with equal size columns

<table width="400px">
  <tr>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  <td width="100px"></td>
  </tr>
</table>

For variable number of columns use %

<table width="100%">
  <tr>
  <td width="(100/x)%"></td>
  </tr>
</table>

where 'x' is number of columns

How to set up fixed width for td?

For Bootstrap 4.0:

In Bootstrap 4.0.0 you cannot use the col-* classes reliably (works in Firefox, but not in Chrome).
You need to use OhadR's answer:

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

For Bootstrap 3.0:

With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

For Bootstrap 2.0:

With twitter bootstrap 2 use: class="span*" where * is a number of columns of width.

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** If you have <th> elements set the width there and not on the <td> elements.

Making two of 4 columns equal width

You are looking for the table-layout: fixed;.

table-layout: fixed; - Table and column widths are set by the widths
of table and col elements or by the width of the first row of cells.
Cells in subsequent rows do not affect column widths.

see: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

table, td {      padding: 0px;      margin: 0px;      border: none;      border-collapse: collapse;    }    table.main_table {      width: 100%;      table-layout: fixed;    }    td.fixed_column {      width: 190px;      background-color: red;    }    td.non_fixed_column {      background-color: yellow;    }

<table class='main_table'>      <tr><td class='fixed_column'>1.1</td>      <td class='non_fixed_column'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td><td class='fixed_column'>3.1</td><td class='non_fixed_column'>4.1</td></tr>      <tr><td class='fixed_column'>1.2</td><td class='non_fixed_column'>2.2</td><td class='fixed_column'>3.2</td><td class='non_fixed_column'>4.2</td></tr>    </table>

---

Related Topics