How to make sticky table header overflow inside scrollable div using only css?

Question

I want to make sticky table header (always on the top), but i have two problems:

thead doesn't overflow inside container div
thead doesn't scroll (on x axis) with the content

Here is an example (just forked from the other question):

HTML:

 <section class="">
      <div class="container">
        <table>
          <thead>
            <tr class="header">
              <th>
                Table attribute name
                <div>Table attribute name</div>
              </th>
              <th>
                Value
                <div>Value</div>
              </th>
              <th>
                Description
                <div>Description</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>align</td>
              <td>left, center, right</td>
              <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
            </tr>
            <tr>
              <td>bgcolor</td>
              <td>rgb(x,x,x), #xxxxxx, colorname</td>
              <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
            </tr>
            <tr>
              <td>border</td>
              <td>1,""</td>
              <td>Specifies whether the table cells should have borders or not</td>
            </tr>
            <tr>
              <td>cellpadding</td>
              <td>pixels</td>
              <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
            </tr>
            <tr>
              <td>cellspacing</td>
              <td>pixels</td>
              <td>Not supported in HTML5. Specifies the space between cells</td>
            </tr>
            <tr>
              <td>frame</td>
              <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
              <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
            </tr>
            <tr>
              <td>rules</td>
              <td>none, groups, rows, cols, all</td>
              <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
            </tr>
            <tr>
              <td>summary</td>
              <td>text</td>
              <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
            </tr>
            <tr>
              <td>width</td>
              <td>pixels, %</td>
              <td>Not supported in HTML5. Specifies the width of a table</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>

CSS:

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
  width: 200px;
  height: 200px;
}

table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  width: 100px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  top: 0;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}

I want to use only css solution without js tricks. Width of columns can be explicitly defined, but height can't.

Can you repair my example and explain how it should work?

EDIT: I have already checked question: Fixed header table with horizontal scrollbar and vertical scrollbar on - this is not solution for me, because first two answers uses JQuery, and the third one suggested by @Anshuman is also js-based (js is just hidden in html tags onscroll= )

Most solutions are using two tables instead of thead, and i want to avoid that - i want to style already rendered html table with thead section.

please check this answer. http://stackoverflow.com/questions/14977864/fixed-header-table-with-horizontal-scrollbar-and-vertical-scrollbar-on/35947146#35947146 Up-vote if it works for you — Anshuman, Mar 19 '17 at 14:58
Possible duplicate of [Fixed header table with horizontal scrollbar and vertical scrollbar on](http://stackoverflow.com/questions/14977864/fixed-header-table-with-horizontal-scrollbar-and-vertical-scrollbar-on) — Anshuman, Mar 19 '17 at 15:02
Thanks, i have just edited my question to explain differences — Lukasz B, Mar 19 '17 at 15:19
For controlling DOM elements, you will need javascript. Nothing in plain css will do that for you. The best you can do is to use inline javascript to avoid using any additional tools. Good luck finding an answer using only CSS :) — Anshuman, Mar 19 '17 at 15:24

score 2 · Accepted Answer · answered Mar 19 '17 at 15:22

using your html structure, you can dispatch scrolling bars on the container and tbody. but tbody scrollbar will only be seen if container is scrolled all the way to the right.

Not too sure that is what you look for (width and height used for demo , update these to your needs if that is what you tried to do):

table {
  display: block;
  width: 75vw;
}

section {
  width: 25vw;
  overflow: hidden;
  position: relative;
  overflow-x: auto;
}

thead,
tbody {
  display: block;
}

tbody {
  height: 150px;
  overflow-x: hidden;
  overflow-y: auto;
}

tr {
  display: table;
  border-collapse: collapse;
  width: 75vw;
  table-layout: fixed;
}

th,
td,
th div {
  box-shadow: 0 0 0 1px;
}

th div {
  position: absolute;
  top: 0;
  left: auto;
  width: 25vw;
  background: gray;
}

<section>
  <table>
    <thead>
      <tr class="header">
        <th>
          Table attribute name
          <div>Table attribute name</div>
        </th>
        <th>
          Value
          <div>Value</div>
        </th>
        <th>
          Description
          <div>Description</div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>align</td>
        <td>left, center, right</td>
        <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
      </tr>
      <tr>
        <td>bgcolor</td>
        <td>rgb(x,x,x), #xxxxxx, colorname</td>
        <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
      </tr>
      <tr>
        <td>border</td>
        <td>1,""</td>
        <td>Specifies whether the table cells should have borders or not</td>
      </tr>
      <tr>
        <td>cellpadding</td>
        <td>pixels</td>
        <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
      </tr>
      <tr>
        <td>cellspacing</td>
        <td>pixels</td>
        <td>Not supported in HTML5. Specifies the space between cells</td>
      </tr>
      <tr>
        <td>frame</td>
        <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
        <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
      </tr>
      <tr>
        <td>rules</td>
        <td>none, groups, rows, cols, all</td>
        <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
      </tr>
      <tr>
        <td>summary</td>
        <td>text</td>
        <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
      </tr>
      <tr>
        <td>width</td>
        <td>pixels, %</td>
        <td>Not supported in HTML5. Specifies the width of a table</td>
      </tr>
    </tbody>
  </table>

Wow! Its almost what i was looking for! The only problem i have with this code is to make tbody to fill 100% width and height of parent container. Simply changing width and height won't work. As i said in original question only width of columns can be explicitly defined. Container width and height is set only for example. In real, it will be 100% of parent div. — Lukasz B, Mar 19 '17 at 15:46
I applied some changes: using display:table-row and display: table-cell - because i have colspan and rowspan in the table (Consequently also max-width and min-width to make columns equal size). After all - its all css and it works for existing table. Thanks for help! — Lukasz B, Mar 21 '17 at 20:19

How to make sticky table header overflow inside scrollable div using only css?

1 Answers1