Fixed width column in HTML table with table-layout=auto

Question

When an HTML table has it's table-layout set to auto its columns are auto-sized. Given this scenario is there a way to keep specific columns fixed width? I've tried using CSS width - doesn't seem to have any effect.

maxbellec · Answer 1 · 2019-01-16T13:12:18.853

5

use min-width instead of width:

<table style="table-layout: auto">
  <tr>
    <td style="min-width: 200px">some cell 200px width</td>
    <td>other cell, auto width</td>
    <td>other cell, auto width</td>
    <td>other cell, auto width</td>
    <td>other cell, auto width</td>
  </tr>
</table>

edited Jan 16 '19 at 13:12

answered Jan 15 '19 at 11:43

maxbellec

16,093
10
36
43

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/21935112) – Johan Jan 16 '19 at 07:43
1

it does answer the question, but I've clarified my answer – maxbellec Jan 16 '19 at 13:14
An excellent answer that solved my problem. Thank you. – RedDragonWebDesign Dec 09 '20 at 14:20

score 4 · Accepted Answer · answered Oct 08 '13 at 15:52

You can do this using CSS if you use nth-child

CSS:

.table {
    table-layout:auto
}
td, th {
    border: 1px solid #999;
    padding: 0.5rem;
}
.table1 th:nth-child(1), .table1 td:nth-child(1) {
    width: 200px; /*becomes 218px with padding*/
    background: hsl(150, 50%, 50%);
}

HTML:

<h3>table 1</h3>

<table class="table1">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>I'm 218px wide!</td>
            <td>00001</td>
            <td>Blue</td>
        </tr>
        <tr>
            <td>I'm 218px wide!</td>
            <td>00002</td>
            <td>Red</td>
        </tr>
        <tr>
            <td>I'm 218px wide!</td>
            <td>00003</td>
            <td>Green</td>
        </tr>
    </tbody>
</table>

<p>&#160;</p>

<h3>table 2</h3>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>I'm 118px wide!</td>
            <td>00001</td>
            <td>Blue</td>
        </tr>
        <tr>
            <td>I'm 118px wide!</td>
            <td>00002</td>
            <td>Red</td>
        </tr>
        <tr>
            <td>I'm 118px wide!</td>
            <td>00003</td>
            <td>Green</td>
        </tr>
    </tbody>
</table>

Here is a demo: http://jsfiddle.net/3dyhE/2/

Where have you been all my life :) ? – Yuriy Galanter Oct 08 '13 at 16:05 — Yuriy Galanter, Oct 08 '13 at 16:05
Just returning the favor :) – cassidymack Oct 08 '13 at 16:19 — cassidymack, Oct 08 '13 at 16:19

Amit Beckenstein · Answer 3 · 2021-12-13T12:54:14.733

In my case I had to specify widths for all the columns and have them grow relatively to the table which fills the available width, but I still wanted one column's width to stay fixed. The solution was to set width for the fixed-width column, and min-width & max-width for the auto-width columns:

table {
  table-layout: auto;
  text-align: left;
  border: 1px solid black;
  width: 100%;
}

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

.a {
  min-width: 100px;
  max-width: 100px;
}

.b {
  width: 50px;
}

.c {
  min-width: 40px;
  max-width: 40px;
}

.d {
  min-width: 80px;
  max-width: 80px;
}

<table>
  <tr>
    <th class="a">A</th>
    <th class="b">B</th>
    <th class="c">C</th>
    <th class="d">D</th>
  </tr>
  <tr>
    <td class="a">Very long text here</td>
    <td class="b">Very long text here</td>
    <td class="c">Very long text here</td>
    <td class="d">Very long text here</td>
  </tr>
</table>

Fixed width column in HTML table with table-layout=auto

3 Answers3