table with fixed header at top

Question

I am trying to create a table w/ a fixed header at the top for data from our database. When I add 'position:fixed;' to the header's css it keeps it at the top but it forces the entire header to the first column. How can I get the table header to be at the top and be correctly aligned w/ the columns? I'd prefer a css/html solution, if possible.

EDIT: I've tried quite a few of the jQuery solutions that I've found on SO and through google. Some work, some don't. Those that do work on their own tend to break when I combine it with other scripts I have running on my pages...

<style>
  .dg_hdr_row{
  position: fixed;
  top:0;
  height: 25px;
  }

  .dg_col1{ width:60%; border: 1px solid #000; padding: 5px;}
  .dg_col2{ width:15%; border: 1px solid #000; padding: 5px;}
  .dg_col3{ width:10%; border: 1px solid #000; padding: 5px;}
  .dg_col4{ width:15%; border: 1px solid #000; padding: 5px;}

</style>

<table width="100%">

 <thead width="100%" >
  <tr width="100%" class="dg_hdr_row" >
   <th width="60%">Column 1</th>
   <th width="15%">Column 2</th>
   <th width="10%">Column 3</th>
   <th width="15%">Column 4</th>
  </tr>
 </thead>

    <tbody>
        <tr class="dg_row">
            <td class="dg_col1"></td>
            <td class="dg_col2"></td>
            <td class="dg_col3"></td>
            <td class="dg_col4"></td>
        </tr>
        <tr class="dg_row">
            <td class="dg_col1"></td>
            <td class="dg_col2"></td>
            <td class="dg_col3"></td>
            <td class="dg_col4"></td>
        </tr>       
    </tbody>
</table>

Answer 1

So there are some subtle issues with fixed positioning that make this particularly difficult.

Fixed elements are relative to the browser viewpoint

When you declare position: fixed, any additional position rules (like left or top) will place the header relative to the viewport itself - the top left corner of the screen. You can't use any tricks to make it relative to its parent, either, since it will be in the same place whenever the page scrolls. This might not affect your web page, but it's still something to consider.

Fixed elements don't work as expected in mobile browsers

I don't know your specific use case, but it's food for thought.

Fixed positioning removes elements from normal flow

This is what's causing the problem, as far as I can tell. When position: fixed is declared, the element actually breaks out of the normal layout and position of elements of the page, and now works in its own unique block.

From the CSS2 spec (this applies to fixed positioning as well):

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.

This is good, since you want the header to float above the table, but also bad because in most browsers, it's laid out separately from the rest of the table.

Potential fixes

• If the only thing on the page is your table, you should be able to set the header to use width: 100% and apply the same cell widths as the rest of the table. It might be hard to get the sizing to match up just right, though, especially when the window is resized.

• Use some simple JavaScript to display the header. I know you want to keep this with HTML and CSS (I usually do too), but JavaScript fits well because the floating header shouldn't be an essential part of using the site. It should be available for browsers that support it, but those that don't should still be able to use the table. There's a very good technique at CSS-Tricks
  (http://css-tricks.com/persistent-headers/), but you'll be able to find others by looking for "sticky table headers" on your favorite search engine.

Answer 2

Have you looked at DataTables yet? Here's the horizontal part, if I understand what you mean:

http://datatables.net/release-datatables/extras/FixedColumns/index.html

Answer 3

Here is a working HTML/CSS solution to you problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
        body{
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
        .fixed {
            position: relative;
            width: 100%;
            top: 25px;
            border: 0;
            border-collapse: collapse;
        }
        .fixed td, .fixed th {
            border: 1px solid black;
            height: 25px;
        }
        .fixed tr:first-child {
            display: table;
            position: fixed;
            width: 100%;
            background: #FFFFFF;
        }

      .dg_col1{ width:60%;}
      .dg_col2{ width:15%;}
      .dg_col3{ width:10%;}
      .dg_col4{ width:15%;}

</style>
    </head>

    <body>
        <table class="fixed">
            <tr>
                <th width="60%">Header 1</th>
                <th width="15%">Header 2</th>
                <th width="10%">Header 2</th>
                <th width="15%">Header 2</th>
            </tr>
            <tr>
                <td class="dg_col1">Data 14</td>
                <td class="dg_col2">Data 14</td>
                <td class="dg_col3">Data 14</td>
                <td class="dg_col4">Data 24</td>
            </tr>           

        </table>
    </body>
</html>

Answer 4

If you are looking for a framework independent solution try Grid: http://www.matts411.com/post/grid/

It's hosted on Github here: https://github.com/mmurph211/Grid

Not only does it support fixed headers, it also supports fixed left columns and footers, among other things. Unfortunately it does require Javascript.