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
– Zak, Commented May 3, 2018 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
– baris1892, Commented May 3, 2018 at 19:53
Would this HTML / CSS solution work? --> jsfiddle.net/0qpegqzc/2 — Zak
– Zak, Commented May 3, 2018 at 21:06
No, if I see it correct, only the headers are fixed, but not two columns (see my solution for comparison^^) — baris1892
– baris1892, Commented May 3, 2018 at 21:57

Fabian de Cuveland · Accepted Answer · 2019-02-26 21:59:52Z

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, 2019 at 21:59

Fabian de Cuveland

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

baris1892 · Accepted Answer · 2018-05-05 18:22:56Z

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 5, 2018 at 18:22

baris1892

1,0611 gold badge18 silver badges30 bronze badges

2 Comments

baris1892 Over a year ago

Yep, unfortunately, but I'm not sure how this could be achieved without fixed width/height. Did you solve it using variable width/height?

PirateApp Over a year ago

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

Andreas Hägglund · Accepted Answer · 2022-03-18 11:28:48Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related