CODEWITHSUNDEEP
htmlcsshtml-table
Sinoj Mahan
Sinoj Mahan

Reputation: 45

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

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.

Upvotes: 3

Views: 2236

Answers (1)

Greg Rozmarynowycz
Greg Rozmarynowycz

Reputation: 2085

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.

Upvotes: 1

Related Questions