Fixed-width columns in a dynamic table

Question

I have a table that shall be dynamic (which means I cannot use table-layout: fixed) but that shall have several fixed-width columns in it. The fixed-width columns shall also support colspans of larger than 1.

The dynamic columns (and the table itself) should work just like normal table cells in pure HTML:

Data shall never get cut off, even when the viewport is too small
When the table does not fit the viewport, it shall be wider than the viewport

The fixed-width colums should work like this:

Always have a fixed width
Cut off any data that does not fit into it

I tried three approaches, none of them works:

Defining the widths in the first table row
Defining the widths in a colgroup/col section of the table
Inserting a <div> into the fixed-width cells

Nothing works.

JS-Fiddle

table {
  border-collapse: collapse;
}
td {
  border: 3px solid red;
}
.fw {
  overflow: hidden;
  height: 20px;
}

<table width="100%">
  <colgroup>
    <col width="100%">
      <col width="50px">
        <col width="50px">
  </colgroup>
  <tr>
    <td>My dynamic cell shall be greedy and take up all available space</td>
    <td class=fw nowrap>
      <div class=fw>My first fixed-width cell shall be of fixed width</div>
    </td>
    <td class=fw>..</td>
  </tr>
  <tr>
    <td>dynamic</td>
    <td class=fw colspan=2>Fixed cells shall also support multiple colspans</td>
  </tr>
</table>

As I said, I cannot use table-layout: fixed because I also have dynamic columns.

What's wrong with this example I made with table-layout: fixed? 2 columns are fixed at 100px each and the second row includes a colspan that is 200px. The fluid column resizes fine. — misterManSam
– misterManSam, Commented Sep 28, 2016 at 8:24
@misterManSam: The .fluid column disappears when the viewport gets too small - I tried to add "min-width: 200px" to .fluid as a workaround but that didn't work either. The .fluid column should work like a normal table cell - it should never overflow or cut off data. — Robby75
– Robby75, Commented Sep 28, 2016 at 8:31
Are you sure you can't just place a suitable min-width on the table itself? — misterManSam
– misterManSam, Commented Sep 28, 2016 at 8:33
@misterManSam: Yeah that seems to work, thanks - Write an answer and I will accept it (after a few tests...) — Robby75
– Robby75, Commented Sep 28, 2016 at 8:38

misterManSam · Accepted Answer · 2016-09-28 08:47:10Z

You can use table-layout: fixed if you have a suitable min-width placed on the table to prevent overflow of the dynamically sized column:

table {
    table-layout: fixed;
    width: 100%;
    min-width: 400px;
}

Example

Note that the width attribute is deprecated and the CSS property should be used to size your columns and table.

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  min-width: 400px;
}
td {
  border: 3px solid red;
  overflow: hidden;
}
.fluid {
  width: 100%;
}
.fixed {
  width: 100px;
}

<table>
  <colgroup>
    <col class="fluid">
    <col class="fixed">
    <col class="fixed">
  </colgroup>
  <tr>
    <td>My dynamic cell shall be greedy and take up all available space</td>
    <td>My first fixed-width cell shall be of fixed width</td>
    <td>....</td>
  </tr>
  <tr>
    <td>dynamic</td>
    <td colspan="2">Fixed cells shall also support multiple colspans</td>
  </tr>
</table>

Tobia · Accepted Answer · 2016-09-28 08:21:57Z

0

You need to use:

min-width: 50px;
max-width: 50px;

answered Sep 28, 2016 at 8:21

Tobia

19.1k7 gold badges84 silver badges101 bronze badges

Collectives™ on Stack Overflow

Fixed-width columns in a dynamic table

2 Answers 2

Example

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related