Table with table-layout: fixed; and how to make one column wider

Question

So I have a table with this style:

table-layout: fixed;

Which makes all columns to be of the same width. I would like to have one column (the first one) to be wider and then rest of the columns to occupy the remaining width of the table with equal widths.

How to achieve that?

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
  background: #ddd;
  table-layout: fixed;
}

table th, table td {
  border: 1px solid #000;
}

table td.wideRow, table th.wideRow {
  width: 300px;
}

<table class="CalendarReservationsBodyTable">
  <thead>
    <tr>
      <th colspan="97">Rezervovane auta</th>
    </tr>
    <tr>
      <th class="corner wideRow">Auto</th>
      <th class="odd" colspan="4">0</th>
      <th class="" colspan="4">1</th>
      <th class="odd" colspan="4">2</th>
      <th class="" colspan="4">3</th>
      <th class="odd" colspan="4">4</th>
      <th class="" colspan="4">5</th>
      <th class="odd" colspan="4">6</th>
      <th class="" colspan="4">7</th>
      <th class="odd" colspan="4">8</th>
      <th class="" colspan="4">9</th>
      <th class="odd" colspan="4">10</th>
      <th class="" colspan="4">11</th>
      <th class="odd" colspan="4">12</th>
      <th class="" colspan="4">13</th>
      <th class="odd" colspan="4">14</th>
      <th class="" colspan="4">15</th>
      <th class="odd" colspan="4">16</th>
      <th class="" colspan="4">17</th>
      <th class="odd" colspan="4">18</th>
      <th class="" colspan="4">19</th>
      <th class="odd" colspan="4">20</th>
      <th class="" colspan="4">21</th>
      <th class="odd" colspan="4">22</th>
      <th class="" colspan="4">23</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="alignRight wideRow">KE-260 FC - Octavia combi</td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td colspan="16" class="highlighted borderLeft" title="Richard Knop">
        Richard Knop
      </td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td colspan="14" class="highlighted" title="Richard Knop">
        Richard Knop
      </td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
      <td class=" borderLeft"></td>
      <td class="odd"></td>
      <td class=""></td>
      <td class="odd"></td>
    </tr>
  </tbody>
</table>

jsfiddle: http://jsfiddle.net/6p9K3/

Notice the first column, I want it to be 300px wide.

score 108 · Accepted Answer · edited Nov 16 '14 at 12:48

108

You could just give the first cell (therefore column) a width and have the rest default to auto

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
  width: 150px;
}
td+td {
  width: auto;
}

<table>
  <tr>
    <td>150px</td>
    <td>equal</td>
    <td>equal</td>
  </tr>
</table>

or alternatively the "proper way" to get column widths might be to use the col element itself

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
}
.wide {
  width: 150px;
}

<table>
  <col span="1" class="wide">
    <tr>
      <td>150px</td>
      <td>equal</td>
      <td>equal</td>
    </tr>
</table>

edited Nov 16 '14 at 12:48

Community

1
1

answered Jun 06 '11 at 15:30

clairesuzy

27,296
8
54
52

yea seems to - certainly the `col` technique does anyway: **[see updated fiddle](http://jsfiddle.net/clairesuzy/HSVae/) - and with the colspan method you could then go on a set other column widths as required too – clairesuzy Jun 06 '11 at 21:20
21

If you have a `thead` the width should be set on its `th` – Jonathan de M. Sep 16 '15 at 13:03
Does not work, if there is a table caption available: `....
...
` – malisokan Mar 23 '17 at 10:30
2

Just use `td:first-of-type { width: 150px; }`. No need for two selectors. Also keep in mind that the first row of the table with `table-layout: fixed` determines the width. – Zach Saucier Feb 14 '20 at 16:37
2

@ZachSaucier makes a really important point here that's easy to overlook. You can specify what row for the browser to start looking at widths by setting table-layout: fixed to that specific row. Everywhere else I saw only said "it starts looking at the first cell". – J215D Jul 27 '20 at 15:52

kta · Answer 2 · 2013-06-10T02:41:44.843

The important thing of table-layout: fixed is that the column widths are determined by the first row of the table.

So

if your table structure is as follow (standard table structure)

<table>
  <thead>
      <tr>
          <th> First column </th>
          <th> Second column </th>
          <th> Third column </th>        
      </tr>
  </thead>

   <tbody>
      <tr>
          <td> First column </td>
          <td> Second column </td>
          <td> Third column </td>        
      </tr>
  </tbody>

if you would like to give a width to second column then

<style> 
    table{
        table-layout:fixed;
        width: 100%;
    }

    table tr th:nth-child(2){
       width: 60%;
     }

</style>

Please look that we style the th not the td.

great tip- table tr th:nth-child(4) – Paramvir Singh Karwal Dec 15 '17 at 07:07 — Paramvir Singh Karwal, Dec 15 '17 at 07:07

score 9 · Answer 3 · answered Jun 06 '11 at 15:14

9

Are you creating a very large table (hundreds of rows and columns)? If so, table-layout: fixed; is a good idea, as the browser only needs to read the first row in order to compute and render the entire table, so it loads faster.

But if not, I would suggest dumping table-layout: fixed; and changing your css as follows:

table th, table td{
border: 1px solid #000;
width:20px;  //or something similar   
}

table td.wideRow, table th.wideRow{
width: 300px;
}

http://jsfiddle.net/6p9K3/1/

answered Jun 06 '11 at 15:14

Jason Gennaro

34,535
8
65
86

1

That does not work properly. Look at 8,9,10,11 columns, they are too narrow. – Richard Knop Jun 06 '11 at 17:15
gotcha. You can fix that by placing the content in the `td` that spans the four `th`s like so: `
Richard Knop
` Set the `width` to the sum of all the individual `td`s. See here http://jsfiddle.net/6p9K3/2/ – Jason Gennaro Jun 06 '11 at 18:28

score 5 · Answer 4 · answered Jun 06 '11 at 15:20

5

What you could do is something like this (pseudocode):

<container table>
  <tr>
    <td>
      <"300px" table>
    <td>
      <fixed layout table>

Basically, split up the table into two tables and have it contained by another table.

answered Jun 06 '11 at 15:20

kei

20,157
2
35
62

24

nested tables are best tables – user1721135 Jun 04 '13 at 19:34
I know this is pseudocode, but this would be totally awesome as an HTML framework like Pug.js! – alistair Sep 16 '19 at 16:20

Table with table-layout: fixed; and how to make one column wider

4 Answers4

Linked