How to Create an HTML Table with a Fixed Left Column and Scrollable Body

It is possible to create a table, which has a fixed left column and a scrollable body. For that, you’ll need to use some CSS. You can use the position property set to “absolute” for the first column and specify its width. Then use the overflow-x property set to “scroll” for the entire table.

In this snippet, we’ll show all the needed steps. Let’s start with creating HTML.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Add a <table> element within a <div>.
  • Add <tr> elements inside the <table> tag.
  • Use <th> and <td> elements with class attributes inside the <tr> elements.
<div>
  <table>
    <tr>
      <th class="headcol">1</th>
      <td class="long">LOREM IPSUM LOREM IPSUM</td>
      <td class="long">LOREM IPSUM LOREM IPSUM</td>
    </tr>
    <tr>
      <th class="headcol">2</th>
      <td class="long">LOREM IPSUM LOREM IPSUM</td>
      <td class="long">LOREM IPSUM LOREM IPSUM</td>
    </tr>
    <tr>
      <th class="headcol">3</th>
      <td class="long">LOREM IPSUM LOREM IPSUM</td>
      <td class="long">LOREM IPSUM LOREM IPSUM</td>
    </tr>
    <tr>
      <th class="headcol">4</th>
      <td class="long">LOREM IPSUM LOREM IPSUM</td>
      <td class="long">LOREM IPSUM LOREM IPSUM</td>
    </tr>
    <tr>
      <th class="headcol">5</th>
      <td class="long">LOREM IPSUM LOREM IPSUM</td>
      <td class="long">LOREM IPSUM LOREM IPSUM</td>
    </tr>
    <tr>
      <th class="headcol">6</th>
      <td class="long">LOREM IPSUM LOREM IPSUM</td>
      <td class="long">LOREM IPSUM LOREM IPSUM</td>
    </tr>
  </table>
</div>

Add CSS

table {
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid #000;
}
td, th {
  margin: 0;
  border: 1px solid #000;
  white-space: nowrap;
  border-top-width: 0px;
}
div {
  width: 450px;
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}
.headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 2px;
  margin-top: -1px;
}
.headcol:before {
  content: 'Row ';
}
.long {
  background: #8cdba3;
  letter-spacing: 1em;
}

Let’s see the full code.

Example of creating a table with a fixed left column and scrollable body:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: separate;
        border-spacing: 0;
        border-top: 1px solid #000;
      }
      td,
      th {
        margin: 0;
        border: 1px solid #000;
        white-space: nowrap;
        border-top-width: 0px;
      }
      div {
        width: 450px;
        overflow-x: scroll;
        margin-left: 5em;
        overflow-y: visible;
        padding: 0;
      }
      .headcol {
        position: absolute;
        width: 5em;
        left: 0;
        top: auto;
        border-top-width: 2px;
        margin-top: -1px;
      }
      .headcol:before {
        content: 'Row ';
      }
      .long {
        background: #8cdba3;
        letter-spacing: 1em;
      }
    </style>
  </head>
  <body>
    <div>
      <table>
        <tr>
          <th class="headcol">1</th>
          <td class="long">LOREM IPSUM LOREM IPSUM</td>
          <td class="long">LOREM IPSUM LOREM IPSUM</td>
        </tr>
        <tr>
          <th class="headcol">2</th>
          <td class="long">LOREM IPSUM LOREM IPSUM</td>
          <td class="long">LOREM IPSUM LOREM IPSUM</td>
        </tr>
        <tr>
          <th class="headcol">3</th>
          <td class="long">LOREM IPSUM LOREM IPSUM</td>
          <td class="long">LOREM IPSUM LOREM IPSUM</td>
        </tr>
        <tr>
          <th class="headcol">4</th>
          <td class="long">LOREM IPSUM LOREM IPSUM</td>
          <td class="long">LOREM IPSUM LOREM IPSUM</td>
        </tr>
        <tr>
          <th class="headcol">5</th>
          <td class="long">LOREM IPSUM LOREM IPSUM</td>
          <td class="long">LOREM IPSUM LOREM IPSUM</td>
        </tr>
        <tr>
          <th class="headcol">6</th>
          <td class="long">LOREM IPSUM LOREM IPSUM</td>
          <td class="long">LOREM IPSUM LOREM IPSUM</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Result

1 LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
2 LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
3 LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
4 LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
5 LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM
6 LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM