table with fixed first header and fixed column

Question

I need to stress that this is about HORIZONTAL scrolling with THE FIRST COLUMN FIXED because most answers are giving me solutions to vertical scrolling.

Is it possible using pure css to have a table that scrolls horizontally but the first header and first column are fixed with the rest of the content scrollable?

For example if I had this table:

<table>
  <thead>
   <tr>
     <th class="head1">Head 1</th>
     <th class="head2">Head 2</th>
     <th class="head2">Head 3</th>
   </tr>
  </thead>
  <tbody>
   <tr>
     <td class="col1">Col 1</td>
     <td class="col2">Col 2</td>
     <td class="col3">Col 3</td>
   </tr>
  </tbody>
</table>

The head1 and col1 would always be shown with the other columns scrollable.

Already answered here: https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody — Lorenz, Nov 21 '14 at 16:47
This answered might help you as well: http://stackoverflow.com/questions/17827908/how-to-make-fixed-header-table-inside-scrollable-div — Adriansyah, Nov 21 '14 at 16:49
I am asking for a fixed first column with horizontal scrolling so neither of those links are relevant. — dagda1, Nov 21 '14 at 16:59
@Adriansyah you are completely wrong and did not read the question and also marked me down without reading the question. I am looking for a fixed first column with horizontal scrolling and not vertical scrolling. — dagda1, Nov 21 '14 at 17:07
Perhaps this one is more on point: http://stackoverflow.com/questions/20086473/table-with-fixed-and-scrolling-columns — Heretic Monkey, Nov 21 '14 at 17:08
@MikeMcCaughan that is the same as the above. I am talking about horizontal scrolling — dagda1, Nov 21 '14 at 17:12
Have a look at this (with jQuery, but it doesn't seem to be possible without JS): http://jsfiddle.net/C8Dtf/81/ — Lorenz, Nov 21 '14 at 17:13
@dagda1, Actually, it is a different question, with the title "Table with fixed and scrolling columns", which seems to be on point. Please follow the link. — Heretic Monkey, Nov 21 '14 at 17:25

score 0 · Accepted Answer · edited Dec 12 '14 at 05:38

This is what I was after. The example uses 2 tables that are floated left with an overflow applied to a div that wraps the right most table. Both tables are contained in a div with a fixed width.

<div class="table-container">
  <div class="left">
    <table>
      ...
    </table>
   </div>
  <div class="right">
    <table>
      ...
    </table>
   </div>
</div>

.table-container {
    position: relative;
    width: 600px;
    height: 100%;    
    display: inline-block;
}
table {
    float: left;
}

.right {
    overflow: auto;
}

score -1 · Answer 2 · answered Nov 22 '14 at 09:05

-1

<table >
   <tr>
      <th>abc</th>
      <th>xyz</th>
   </tr>

 <tr>
    <td colspan="2">
        <div  style="height:50px; overflow:scroll;">
           <table>
                <tr>
                  <td>1</td>
                  <td>1</td>
                </tr>

                <tr>
                  <td>2</td>
                  <td>2</td>
                </tr>

                <tr>
                  <td>3</td>
                  <td>3</td>
                </tr> 
          </table>
       </div>
     </td>
   </tr>
  </table>

Please check it. It may be work.

answered Nov 22 '14 at 09:05

Shailesh Katarmal

2,757
1
12
15

The question adds for horizontal scrolling not vertical with the first column fixed. – dagda1 Nov 22 '14 at 10:32
You have to use overflow-x:scroll property for horizontal scrolling – Shailesh Katarmal Nov 22 '14 at 11:32
I am looking for a fixed first column but I must have worded the question wrong because everybody has given me answers for vertical scrolling without any mention of a fixed first column. – dagda1 Nov 22 '14 at 11:48

table with fixed first header and fixed column

2 Answers2