Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How can I have 2 fixed headers on 1 page?

Tags:

html

jquery

css

I have a page with a fixed header and below that a table that I'd like to have a fixed table header so when I scroll I always see the page header and then the table header below that. When I try to fix the thead this screws up the column alignment of thead. How do I correct this?

EDIT: My question is how do I get the column headers to line up with the columns?

EDIT: Also note that I need TWO headers...one at the top of the page and another for the table.

  <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    #top1{ 
        border-bottom:black; 
        background: #dedede; 
        position:fixed;
        top:0;
        left:0; 
        width:50%;
        color: #000;
        height: 30px;
    }

    #table{
    width: 50%;
    margin-top: 28px;
    }
    #table_header{
    width: 100%;
    position: fixed;
    }
    .col1{
    width: 40%;
    border: 1px solid #000;
    }
    .col2{
    width: 20%;
    border: 1px solid #000;
    }
    .col3{
    width: 25%;
    border: 1px solid #000;
    }
    .col4{
    width: 15%;
    border: 1px solid #000;
    }
    </style>
    </head>

    <body>
    <div id="top1">
    blah blah blah
    </div>

    <div id="top2">

    <table id="table">
     <thead id="table_header">
      <tr>
       <th class="col1">column 1</th>
       <th class="col2">column 2</th>
       <th class="col3">column 3</th>
       <th class="col4">column 4</th>
      </tr>
     </thead>


    <tbody>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
  <tr><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td><td>fjasklfjsdklfjsdlk</td></tr>
    </tbody>



    </table>
    </div>


    </body>


    </html>
like image 382
kristen Avatar asked Jan 16 '12 15:01

kristen

3 Answers

If I caught you right .. I made a demo for you http://jsfiddle.net/aV54L/
No jQuery, no JavaScript .. CSS only

Here is the code:

<!DOCTYPE HTML>
<html>
<head>
<style>
    body {
    margin : 0px;
}

#top1{ 
    border-bottom:black; 
    background: #dedede; 
    position:fixed;
    top:0;
    left:0; 
    width:50%;
    color: #000;
    height: 30px;
    z-index:5;
}
.col1{
    width: 40%;
    border: 1px solid #000;
}
.col2{
    width: 20%;
    border: 1px solid #000;
}
.col3{
    width: 25%;
    border: 1px solid #000;
}
.col4{
    width: 15%;
    border: 1px solid #000;
}

#tableHeader {
    width: 50%;
    top: 20px;
    position:fixed;
    background-color: red;
    z-index:10;
}

#table {
    position: relative;
    width: 50%;
    top: 50px;
    background-color: aqua;
    z-index:0;
}
</style>
</head>

<body>
<div id="top1">
blah blah blah
</div>

<div id="top2">

<table id="tableHeader" border="0" cellpadding="5" cellspacing="0">
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
 </table>

<table id="table" border="0" cellpadding="5" cellspacing="0">
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>
  <tr>
   <td class="col1">column 1</th>
   <td class="col2">column 2</th>
   <td class="col3">column 3</th>
   <td class="col4">column 4</th>
  </tr>      
 </table>
</div>


</body>


</html>

As I say in the comment, I think that the problem with your code is to give position:fixed to thead tag. If it's not needed I suggest to use two tables as shown in the demo to let positioning to be understood correctly. I think this is not a hack as been said but it's accepting things like they work. I tried to change the original code as less as possible however.

like image 107
Luca Borrione Avatar answered Oct 18 '22 05:10

Luca Borrione

 
#top1{ 
    border-bottom:black; 
    background: #dedede; 
    position:fixed;
    top:0;
    left:0; 
    width:50%;
    color: #000;
    height: 30px;
}
#table{
    width: 50%;
    margin-top: 28px;
}
#table_header{
    margin-left: -8px;
    width: 100%;
    position: fixed;
}
.col1{
    border: 1px solid #000;
}
.col2{
    border: 1px solid #000;
}
.col3{
    border: 1px solid #000;
}
.col4{
    border: 1px solid #000;
}
thead tr {
    width: 50%;
    display: table;
}
like image 23
sidneydobber Avatar answered Oct 18 '22 05:10

sidneydobber

In order to achieve what you are looking for, just Css is not going to help. You need to take help of JavaScript/jQuery.

If you want to have a fixed header for a table then you cannot have its width 100% because if you resize the window or the container which holds the table, it is going to resize the table content but the header will not resize automatically. You have to explicitly set the header column width.

I have a jQuery solution with few lines of code and cleaned and removed most of the unwanted css. Take a look at the demo which I have created and let me know how it helps you.

Note: For the demo I have set table width as 600px. You can set it as per your requirement.

Final Css 

#top1{ 
    border-bottom:black; 
    background: #dedede; 
    position:fixed;
    top:0;
    left:0; 
    width:600px;
    color: #000;
    height: 30px;
}
#table{ width:600px;margin-top: 28px; }
#table thead{ background:white; }
.col1{ width: 40%; }
.col2{ width: 20%; }
.col3{ width: 25%; }
.col4{ width: 15%; }
.col1, .col2, .col3, .col4{ border: 1px solid #000; }
.fixedPosition{ position: fixed; }

Js

$(function(){
    var $table = $("#table"), w,
        $columns = $table.find('thead th')
    $table.find('tr:eq(1) td').each(function(i){
        w = $columns.eq(i).width();
        $(this).width(w);
        $columns.eq(i).width(w);
    })
    $table.find('thead').addClass('fixedPosition');
});

Working Demo
(Note: Once the demo page loads please resize the fiddle output window it is very small to accommodate 600px width table and you might see column not aligning with the table and might think this does not solve the problem)

like image 26
ShankarSangoli Avatar answered Oct 18 '22 05:10

ShankarSangoli
Sign in to Comment

Related questions

Why is Onblur not working (JQuery/Javascript)
Javascript glow/pulsate effect to stop on click
Handling AJAX requests if a session has expired
jQuery: Get reference to click event and trigger it later?
How do you use jQuery( elementArray )?
MVC 3: running javascript after validation has completed but before the actual post?
JQuery how to increment date
Jquery UI tab init after array change in knockoutjs
What's the raw JavaScript equivalent to jQuery's $(window).width
How to make jQuery Mobile attributes XHTML-valid
action by key press
jQuery: Returning the value of a checkbox as an array?
TinyMCE & .Net - Error when POSTing with a single quote in the text
text font resize
Why Paste Event in jQuery fires on pre-paste?
How to select first block level parent with jQuery?
How to inactivate contentEditable
$.parseJSON() returns null on valid object
Using .after() to add html closing and open tags
need help in jquery unformjs select menu '&' character encoding

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!