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):

http://jsfiddle.net/quxshkdh/

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.

Answer 1

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>