Scrollable table with first column and first row pinned

Question

I'm trying to create scrollable HTML table with 1st column and 1st row pinned. The column is already pinned, but I cannot find a way to pin the row. Is there a way to achieve it?

Live: https://jsfiddle.net/8dnzgtwa/

 .wrapper { margin-left: 5em; overflow-x: auto; width: 200px; } th:first-child, td:first-child { left: 0; position: absolute; width: 5em; } th, td p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } td p { margin-top: 0; } td p:last-child { margin-bottom: 0; } th, td { border-bottom: 1px dashed red; }

 <div class="wrapper"> <table> <thead> <tr> <th>Column 1 aaa aaa aaa</th> <th>Column 2 bbb bbb bbb</th> <th>Column 3 ccc ccc ccc</th> </tr> </thead> <tbody> <tr> <td><p>Column 1 aaa aaa aaa</p></td> <td><p>Column 2 bbb bbb bbb</p><p>Column 2 bbb bbb bbb</p></td> <td><p>Column 3 ccc ccc ccc</p></td> </tr> <tr> <td><p>Column 1 aaa aaa aaa</p></td> <td><p>Column 2 bbb bbb bbb</p></td> <td><p>Column 3 ccc ccc ccc</p></td> </tr> <tr> <td><p>Column 1 aaa aaa aaa</p></td> <td><p>Column 2 bbb bbb bbb</p></td> <td><p>Column 3 ccc ccc ccc</p></td> </tr> <tr> <td><p>Column 1 aaa aaa aaa</p></td> <td><p>Column 2 bbb bbb bbb</p></td> <td><p>Column 3 ccc ccc ccc</p></td> </tr> <tr> <td><p>Column 1 aaa aaa aaa</p></td> <td><p>Column 2 bbb bbb bbb</p></td> <td><p>Column 3 ccc ccc ccc</p></td> </tr> </tbody> </table> </div>

Also (it's not a part of the question, but I would be appreciated for help), I'm trying to fix the cell height. The picture says it all:

Answer 1

The main cause for the issues encountered is position: absolute rule which means that the element on which the later rule is defined is removed from the document flow and that causes the column to be shrinked to the size of its content (where you talked about the border isn't placed in the desired placement).

The position attribute has another powerful value called sticky (from its name you guess what it can do !) that sticks to its place when the viewport scrolls to a certain position.

So instead of :

th:first-child, td:first-child {
    left: 0;
    position: absolute;
    width: 5em;
}

use :

tr th:first-child, tr td:first-child {
  position: sticky;
  left: 0;
  width: 5em;
}

And for the first row to be pinned, use sticky with top: 0 on thead > th elements :

thead th {
  position: sticky;
  top: 0;
}

the div.wrapper in the next demo is minimized (size) so that we ensure having some vertical/horizontal scroll.

 .wrapper { margin-left: 5em; overflow-x: auto; width: 300px; height: 100px; /** for demo purposes to have some scroll **/ } tr th:first-child, tr td:first-child { position: sticky; /** sticky instead of absolute **/ left: 0; width: 5em; background-color: #00f; /** for demo purposes **/ z-index: 2; /** so that the column on the left stays on top of the other columns when having an horizontal scroll **/ } thead th { position: sticky; /** pinn forst row **/ top: 0; background-color: #f00; /** for demo purposes **/ } th, td p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } td p { margin-top: 0; } td p:last-child { margin-bottom: 0; } th, td { border-bottom: 1px dashed red; }

 <div class="wrapper"> <table> <thead> <tr> <th>Column 1 aaa aaa aaa</th> <th>Column 2 bbb bbb bbb</th> <th>Column 3 ccc ccc ccc</th> </tr> </thead> <tbody> <tr> <td> <p>Column 1 aaa aaa aaa</p> </td> <td> <p>Column 2 bbb bbb bbb</p> <p>Column 2 bbb bbb bbb</p> </td> <td> <p>Column 3 ccc ccc ccc</p> </td> </tr> <tr> <td> <p>Column 1 aaa aaa aaa</p> </td> <td> <p>Column 2 bbb bbb bbb</p> </td> <td> <p>Column 3 ccc ccc ccc</p> </td> </tr> <tr> <td> <p>Column 1 aaa aaa aaa</p> </td> <td> <p>Column 2 bbb bbb bbb</p> </td> <td> <p>Column 3 ccc ccc ccc</p> </td> </tr> <tr> <td> <p>Column 1 aaa aaa aaa</p> </td> <td> <p>Column 2 bbb bbb bbb</p> </td> <td> <p>Column 3 ccc ccc ccc</p> </td> </tr> <tr> <td> <p>Column 1 aaa aaa aaa</p> </td> <td> <p>Column 2 bbb bbb bbb</p> </td> <td> <p>Column 3 ccc ccc ccc</p> </td> </tr> <tr> <td> <p>Column 1 aaa aaa aaa</p> </td> <td> <p>Column 2 bbb bbb bbb</p> </td> <td> <p>Column 3 ccc ccc ccc</p> </td> </tr> <tr> <td> <p>Column 1 aaa aaa aaa</p> </td> <td> <p>Column 2 bbb bbb bbb</p> </td> <td> <p>Column 3 ccc ccc ccc</p> </td> </tr> <tr> <td> <p>Column 1 aaa aaa aaa</p> </td> <td> <p>Column 2 bbb bbb bbb</p> </td> <td> <p>Column 3 ccc ccc ccc</p> </td> </tr> </tbody> </table> </div>

read more about theposition rule.