Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I create an HTML table with a fixed/frozen left column and a scrollable body?

I need a simple solution. I know it's similar to some other questions, like:

  • HTML table with fixed headers and a fixed column?
  • How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?

But I need just a single left column to be frozen and I would prefer a simple and script-less solution.

like image 230
agsamek Avatar asked Aug 21 '09 14:08

agsamek


People also ask

How do you fix a column when scrolling in HTML?

If you want a table where only the columns scroll horizontally, you can position: absolute the first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scroll block.

How do you freeze a column and row in an HTML table?

To freeze the row/column we can use a simple HTML table and CSS. HTML: In HTML we can define the header row by <th> tag or we can use <td> tag also. Below example is using the <th> tag. We also put the table in DIV element to see the horizontal and vertical scrollbar by setting the overflow property of the DIV element.

How do I make my table scrollable with fixed header?

Create a Table That Has a Fixed Header. We can create an HTML table that has a fixed header with some CSS. We set the height of the table element to 120px to make restrict the height of it so we can make it scrollable. To make it scrollable, we set the overflow CSS property to scroll .


1 Answers

If you want a table where only the columns scroll horizontally, you can position: absolute the first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scroll block. Don't bother trying this in IE7, however...

Relevant HTML & CSS:

table {    border-collapse: separate;    border-spacing: 0;    border-top: 1px solid grey;  }    td, th {    margin: 0;    border: 1px solid grey;    white-space: nowrap;    border-top-width: 0px;  }    div {    width: 500px;    overflow-x: scroll;    margin-left: 5em;    overflow-y: visible;    padding: 0;  }    .headcol {    position: absolute;    width: 5em;    left: 0;    top: auto;    border-top-width: 1px;    /*only relevant for first row*/    margin-top: -1px;    /*compensate for top border*/  }    .headcol:before {    content: 'Row ';  }    .long {    background: yellow;    letter-spacing: 1em;  }
<div>  <table>          <tr><th class="headcol">1</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>          <tr><th class="headcol">2</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>          <tr><th class="headcol">3</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>          <tr><th class="headcol">4</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>          <tr><th class="headcol">5</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>          <tr><th class="headcol">6</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>  </table>  </div>

Fiddle

like image 186
Eamon Nerbonne Avatar answered Sep 27 '22 21:09

Eamon Nerbonne