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.

Create HTML

Add a <table> element within a <div>.
Add <tr> elements inside the <table> tag.
Use <th> and <td> elements with <span class="attribute">class</span> attributes inside the <tr> elements.

How to Create an HTML Table with a Fixed Left Column and Scrollable 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>

Add CSS

Style the <table> element using the border-collapse, border-spacing and border-top properties.
Style the <td> and <th> elements with the margin, border, white-space and border-top-width properties.
Specify the width, overflow-x, overflow-y, margin-left and padding properties for the <div> element.
Use the position, width, left, top, border-top-width and margin-top properties for the “headcol” class. Add the :before pseudo-element.
Style the “long” class with the background and letter-spacing properties.

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

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>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose">``<div> | 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 |

</div>``</div>