Why does table need width:0 to respect column widths?

Question

This table has column widths 59px and 100px, even though 50px and 100px are the specified column widths.

table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

col:first-child {
  width: 50px;
}

col:nth-child(2) {
  width: 100px;
}

td, th {
  border: 1px solid black;
}

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

But if I add width: 0 to the table, it works.

table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 0;
}

col:first-child {
  width: 50px;
}

col:nth-child(2) {
  width: 100px;
}

td, th {
  border: 1px solid black;
}

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

Why is setting width: 0 necessary? Is there a better way to do it?>

@Observer, but I don't necessarily want to break words. The latter example does not break words. — Paul Draper, Aug 13 '18 at 17:26
Possible duplicate of [Set the table column width constant regardless of the amount of text in its cells?](https://stackoverflow.com/questions/4457506/set-the-table-column-width-constant-regardless-of-the-amount-of-text-in-its-cell) — Heretic Monkey, Aug 13 '18 at 18:38

score 0 · Answer 1 · answered Aug 13 '18 at 17:42

You can set max-width property to the <th> element. Also, you need to specify box-sizing: border-box; to <th> and <td> elements to include padding and border

table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

th:first-child {
  max-width: 50px;
  width: 50px;
}

th:nth-child(2) {
  max-width: 100px;
  width: 100px;
}

td, th {
  border: 1px solid black;
  box-sizing: border-box; 
}

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

score 0 · Answer 2 · answered Aug 13 '18 at 22:32

CSS 2.2 Section 17.5.2.1 Fixed table layout says:

The table's width may be specified explicitly with the 'width' property. A value of 'auto' (for both 'display: table' and 'display: inline-table') means use the automatic table layout algorithm.¹

Width's initial value is auto and the user-agent style sheet does change this for table elements. So despite the css being table-layout: fixed, the automatic table layout algorithm is used, not the fixed table layout algorithm. Setting the width to something else forces the fixed table layout algorithm to be used.

There isn't an obviously "better" solution to this.

_{¹ It then goes on to say that browsers don't have to do this, but it seems they do anyway}

score -1 · Answer 3 · answered Aug 13 '18 at 16:50

Maybe you can take a look at word-break.

table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

col:first-child {
  width: 50px;
}

col:nth-child(2) {
  width: 100px;
}

td, th {
  border: 1px solid black;
  word-break:break-word;
}

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

Why does table need width:0 to respect column widths?

3 Answers3