CODEWITHSUNDEEP
htmlcsshtml-table
Paul D. Waite
Paul D. Waite

Reputation: 98786

Why is my fixed layout table not as wide as its columns?

According to the CSS spec, when a table has the table-layout:fixed property, its width is calculated like this:

...the width of each column is determined as follows:

  1. A column element with a value other than 'auto' for the 'width' property sets the width for that column.

  2. Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.

  3. Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

The width of the table is then the greater of the value of the 'width' property for the table element and the sum of the column widths (plus cell spacing or borders).

My understanding of this is:

  1. the width of each column is calculated (with the width property of <col> elements, if present, taking precedence)
  2. the column widths are totalled
  3. if the column width total is greater than the width property of the <table> element, then the table will be as wide as the column width total.

However — in the following example, I have a table with one row containing three cells. Each column’s width is set to 100 pixels using the <col> element. The table element has no width assigned to it, and it’s the child of a <div> that’s 200 pixels wide.

I’d expect the width of the table to be 300 pixels, and for it to therefore overflow its parent <div>. However, instead, the table is only 200 pixels wide (i.e. as wide as its parent <div>), and each column is therefore narrowed to 66.6 pixels wide. (I’ve checked in the latest Safari, Chrome, Firefox, and Edge.)

Why is the table only 200 pixels wide, and not 300 pixels?

<div style="background:black; color:white; width:300px;">300px</div>

<br>

<div style="background:black; color:white; width:200px;">200px</div>

<br>

<div style="width:200px; background:green; overflow:scroll;">
  <table style="table-layout:fixed; border-collapse:collapse;">
    <col style="width:100px;">
    <col style="width:100px;">
    <col style="width:100px;">
    <tr>
      <td>1</td>
      <td>2</td>
      <td style="background:red;">3</td>
    </tr>
  </table>
</div>

(I’ve given the <div> a green background and overflow:hidden, and the third cell a red background, to make the unexpected result clearer.)

Upvotes: 2

Views: 349

Answers (1)

phobia82
phobia82

Reputation: 1257

You are correct on you interpretation of the rules. The problem is that the width of the table is not set, so the browser can't compare with the column width sum. Just set the width for the table, even width: 0px will work.

<div style="background:black; color:white; width:300px;">300px</div>

<br>

<div style="background:black; color:white; width:200px;">200px</div>

<br>

<div style="width:200px; background:green; overflow:scroll;">
  <table style="table-layout:fixed; border-collapse:collapse;width:0px">
    <col style="width:100px;">
    <col style="width:100px;">
    <col style="width:100px;">
    <tr>
      <td>1</td>
      <td>2</td>
      <td style="background:red;">3</td>
    </tr>
  </table>
</div>

Upvotes: 3

Related Questions