Table with flexible fixed header row and scrollable body

Question

I want to fix the first row and the scrollable body. When I like to fix with the css like this

thead
{
    display: block;
    width: 500px;
}

tbody
{
    display: block;
    width: 500px;
    height: 200px;
    overflow: auto !important;
}

But the headers are disaligned. the column and the rows are disaligned.

th,td
{
    width:50px;
}

I really don't like to fix the <th> element with the 'width' property. I want that as flexible. Any idea for that flexible fixed header?

I edited out your update, questions aren't the place to post working solutions. If the duplicate fixed your problem, then the answer there is sufficient for people to know how to fix this issue. — SuperBiasedMan, Dec 18 '15 at 12:10

Anubhav pun · Answer 1 · 2015-12-14T14:06:20.850

try to use in your style may help you

  <style>
html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
}
table {
  border-spacing: 0;
  width:100%;s
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
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;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}
</style>

in html

<section>
<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>

      </tbody>
    </table>
  </div>
</section>

When i use the absolute in header the contents are disaligned. It doesn't sync with body of the table — Anbu, Dec 15 '15 at 17:47

Table with flexible fixed header row and scrollable body

1 Answers1