Same width cells in table column?

Question

I have read the following:

-autoformatting-1. HTML table: keep the same width for columns

-autoformatting-1. "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." - This doesn't work in Firefox 66.0.4 and never has for me. Check out https://jsfiddle.net/x342vchn/ :

table {
  table-layout: fixed;
}

td {
  border: 1px solid #000;
  overflow: hidden;
  overflow-wrap: break-word;
}

.narrow {
  max-width: 20px; /* Without this, the first table doesn't work either! */
  width: 20px;
}

<table>
  <tbody>
    <tr>
      <td class="narrow">sdkajdwaudawjdjawhdwjahdawjdhajh</td>
      <td>hi</td>
    </tr>
    <tr>
      <td>hi</td>
      <td>hi</td>
    </tr>
  </tbody>
</table>

<table>
  <tbody>
    <tr>
      <td class="narrow">hi</td>
      <td>hi</td>
    </tr>
    <tr>
      <td>sdkajdwaudawjdjawhdwjahdawjdhajh</td>
      <td>hi</td>
    </tr>
  </tbody>
</table>

The first table "works" because the wide content is in the cell that has the max-width restriction. The second table ignores everything.

-autoformatting-2. Set the table column width constant regardless of the amount of text in its cells?

-autoformatting-2. In this case, the answer suggests setting the same width on all cells.

If I want to set the same height for cells in a row, I can target them with a class on the row. So how do I set the same fixed width on cells in a column without specifically setting the max-width and width of all affected cells?

I have done some web searching, and blogs suggest the same as the first answer, but it does not work.

I have also tried setting the width of the first cell (th) in a thead. That made no difference either.

Am I missing something or is Firefox broken?

Currently, I'm using the same class on all cells of a certain width, even if they are empty because the contents can be modified with JS.

Tiago Costa · Answer 1 · 2019-07-05T15:30:55.327

0

Have you tried using a col/colgroup approach (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col) and setting the width attribute?

You'd have something similar to this:

td {
  border: 1px solid #000;
}

<table>
    <tbody>
        <col width="40px" />
        <col width="20px" />
        <tr>
            <td>hi</td>
            <td>hi</td>
        </tr>
        <tr>
            <td>hi</td>
            <td>hi</td>
        </tr>
    </tbody>
</table>

I think this is the way to go for your case.

edited Jul 05 '19 at 15:30

answered Jul 05 '19 at 15:25

Tiago Costa

26
1
3

No, I have not.. but I just did now: the overflow-wrap doesn't work and max-width is ignored. :( Thanks for teaching me about *col* though. – LGT Jul 05 '19 at 16:27

Same width cells in table column?

1 Answers1