Reputation: 21206

Html table with fixed header and vertical scrollbars on the table body

My pen:

http://codepen.io/helloworld/pen/qHDFB

I would like to create a html table:

With a header that stays fixed
A table body that shows scrollbars
The height should NOT have a fixed pixel height it should have 100% height.
The header cells should be aligned to the row cells. I mention this because often I have seen solutions where column1 enters the horizontally the area of header2. This looks bad.
Its ok for me when the columns have a percentage width but not pixel because that would not be responsive.
performance plays no role it will show max 16 rows appr. with max 7 columns.

I want to use CSS only.

It should work in IE10+ and latest FF/Chrome.

You can also use the new CSS Grid Layout from Microsoft which will be ported over to webkit etc... with -ms-grid etc...

How can I make the above individual sample work that the header stays fixed and and the body of the table has vertical scrollbars not the html body itself?

HTML

<table>
  <thead>
    <tr>
      <th>
        <div>First</div>
      </th>
      <th>
        <div>Second</div>
      </th>
      <th>
        <div>Third</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>                  
  </tbody>
</table>

CSS

body, html{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

table{
  width:100%;
  height:100%;
}

td{
  width:33%;
  border:black solid 1px;
}

tbody{
  overflow-x:hidden;
  overflow-y:auto;
}

tr td{
  text-align:center;
  height:100px;
}

th{
  background:lightgray;
  padding:10px;
  border:black solid 1px;
}

Upvotes: 9

Answers (2)

Elham

Reputation: 1

        <table>
            <thead>
                <tr>
                    <th>
                        <div>First</div>
                    </th>
                    <th>
                        <div>Second</div>
                    </th>
                    <th>
                        <div>Third</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>                  
            </tbody>
        </table>

Upvotes: -2

Tom

Reputation: 137

Isn't this what you're looking for? - http://www.imaputz.com/cssStuff/bigFourVersion.html

Just view the source of the example, and this should get you going.

Upvotes: 5

Html table with fixed header and vertical scrollbars on the table body

Answers (2)

Related Questions