How do I create an HTML table with first column is fixed and next column horizontally scrollable

Question

I have a table which has only two column of which i want first column to be fixed and other column is horizontally scrollable. table can have many rows. scrollable should apply to all right column as a group, not for individual column.

following is my table structure

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1,cell 1</td>
        <td>row 1,cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

thanks in advance.

Do you want to have cells in the 2nd column to be independent and to scroll simultaneously while dragging the scrollbar on each of them, or do you want to have all those right-side cells merged together, as shown in the answer below? Here is [that basic fiddle](http://jsfiddle.net/Yn6K6/). — Stano, Aug 05 '12 at 16:47
http://jsfiddle.net/thundercracker/Yn6K6/3/; That will not scroll, as described below, it appears that by default, tables are not designed to contain scroll bars, and will even force a td to be wider than its defined width if the content is wider. — Greg Rozmarynowycz, Aug 05 '12 at 23:26

score 1 · Answer 1 · edited May 23 '17 at 11:51

If you want the who right to column to act as one cell, you would setup up your table as follows:

<table>
     <tr>
         <th>Header 1</th>
         <th>Header 2</th>
     </tr>
     <tr>
          <td>row 1, cell 1</td>
          <td rowspan="2" class="scroll">spans across as may rows as rowspan, vertically</td>
      </tr>
      <tr>
          <td>row 2, cell2  </td>
      </tr>
 </table>

For scrolling, you options depend on your target browsers, If you don't care about non-current versions of IE (8 and before), then you can simply apply the following style to the tall td:

  td.scroll {
      overflow-x: auto;
      overflow-y: hidden;
  }

If you need to accomadate IE 8, then you would apply this style

  overflow: auto;

And would have to ensure the vertical content of the cell was not tall enough to cause a vertical scroll bar. And if you wanted to only target the first column for a fixed witdh,

   td:first-child {
         width: 120px
   }

would do the trick.

EDIT:

The effect you're looking for is much harder to achieve than I first thought - it takes a lot to override the default sizing and behavior of tables. It appears that tables are very strongly resistant to internal scrolling, in fact if the internal content is wider than what the defined width of the td, and even if the table would be wider than the defined width and overflow is set to scroll, the td will still expand to to fit the content. As far as I can tell (please correct me if I'm wrong), the only way to make a td scroll is to add a max-width. In addition, the fixed with column that you want must have a min-width property set to it. Here is my experiment:

http://jsfiddle.net/thundercracker/8CUsm/19/

I don't think this it is very fluid however, the second column will always extend to the width that is defined in in the max-width property.

If you are trying to set this table up to layout a page, I would strongly advise against it. Although it is rather complex, here is an alternative layout that is more fluid; You can try changing the number of rows in the table, and the width of the body, and it will behave the same way.

http://jsfiddle.net/thundercracker/adD3E/67/

I must credit this thread with part of that setup:

CSS - Expand float child DIV height to parent's height

I actually kind of hope I am wrong - and that to create a layout like this it doesn't take this much, so if anyone has a simpler way of doing this please post it.

EDIT: The alternative layout works in all major browsers, and only has some minor issues in IE 7 that I believe could be easily fixed (although I've already been wrong once), so this is pretty cross-browser effective.

Could you explain what the function of the `colspan` in the `th` cells is? That would mean the table were 4 columns wide in total? Aside from that, nice answer. — amon, Aug 05 '12 at 15:20
can u jsfiddle it... i have tried but not working as expected — Sinoj Mahan, Aug 05 '12 at 15:22
Sorry about that, I was in hurry when I was posting this and was also have a bit of brain-block :P, fixed the `th`s — Greg Rozmarynowycz, Aug 05 '12 at 22:07

How do I create an HTML table with first column is fixed and next column horizontally scrollable

1 Answers1