HTML table with two sticky columns and headers (using only CSS)

Question

I'm struggling to get two fixed columns and headers using a HTML table + scrollable body. I've searched a lot and found these approaches:

this (only 1 fixed column/header)
and this (only 1 fixed column/header; no table markup)
and I've also created my own solution using a library, which works fine, but I don't like how the html table tag markups getting messed up & moreover initializing the colModal is not that good since I've a dynamic amount of columns.

Since I am not satisfied with any of these solutions, I would like to know if there is a chance to get this job done only using CSS?

Can you clarify what *tag markups getting messed up* means? Also the `colModal` is just `JSON` -- It can be dynamically set in a variable, and the function re-initialized to compensate for any issues you have with dynamic tables. — Zak, May 03 '18 at 19:05
With "messed up" I mean e.g. duplicate nodes. Every node is duplicated using the library in my solution. So having e.g. duplicate ids in HTML markup is very very bad - but you get this kind of issues using the library. — baris1892, May 03 '18 at 19:53
Would this HTML / CSS solution work? --> http://jsfiddle.net/0qpegqzc/2/ — Zak, May 03 '18 at 21:06
No, if I see it correct, only the headers are fixed, but not two columns (see my solution for comparison^^) — baris1892, May 03 '18 at 21:57

score 1 · Answer 1 · answered Feb 26 '19 at 21:59

1

The closest I came is this.

No HTML table markup and no IE support. I used position: sticky on the header and the first column.

The dimensions of the table are variable, but the widths of the cells need to be supplied.

answered Feb 26 '19 at 21:59

Fabian de Cuveland

11
2

score 0 · Accepted Answer · answered May 05 '18 at 18:22

0

I don't think that it's possible to achieve what I want only using CSS. So I've found another library called TableHeadFixer which does not duplicate nodes and IDs in your HTML markup.

So I came up with this final solution: https://jsfiddle.net/4s53f124/2/

All you have to do is to call the tableHeadFixer method of the library (and if you want to some CSS adjusting):

 $(document).ready(function () {
     $("#fixTable").tableHeadFixer({"left": 2});
 });

answered May 05 '18 at 18:22

baris1892

981
1
16
29

1

Yep, unfortunately, but I'm not sure how this could be achieved without fixed width/height. Did you solve it using variable width/height? – baris1892 Sep 23 '18 at 14:22
I used position sticky on the thead with top 0 and position sticky on the first td and second td with left 0 and calculated width of the first column respectively, this wont work on IE and opera mini though – PirateApp Sep 24 '18 at 03:19

score 0 · Answer 3 · answered Mar 18 '22 at 11:28

One way to do this with only html and css is to add a second table within the first column where you add the first 2 columns and do the same way for the body. Maybe not the most elegant solution but it does the job with pure html and css.

thead tr>th {
  background: #eee;
  position: sticky;
  padding: .5rem;
  z-index: 2;
  top: 0;
  border-bottom: 1px solid black;
}

.sticky-column {
  border-right: 1px solid black;
}

.sticky-column tr>th {
  border-bottom: 0px solid black;
}

thead tr>.sticky-column {
  z-index: 3;
  left: 0;
  top: 0;
}

tbody tr>.sticky-column {
  background: #fff;
  position: sticky;
  z-index: 1;
  left: 0;
}

<table id="board">
  <thead>
    <tr>
      <th class="sticky-column">
        <table>
          <tr>
            <th> <strong>Column 1</strong>
            </th>
            <th>
              <strong>Column 2</strong>
            </th>
          </tr>
        </table>
      </th>
      <th>
        <strong>Column 3</strong>
      </th>
      <th>
        <strong>Column 4</strong>
      </th>
      <th>
        <strong>Column 5</strong>
      </th>
      <th>
        <strong>Column 6</strong>
      </th>
      <th>
        <strong>Column 7</strong>
      </th>
      <th>
        <strong>Column 8</strong>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>
    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>
    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>
    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>

    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>

    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>
    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>
    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>

  </tbody>
</table>

HTML table with two sticky columns and headers (using only CSS)

3 Answers3