CSS, Header-Absolute, scrolling down

Question

I need that (table headers) would be on top and then I scroll down through the list, that headers stay in place(at the top of the page) not in the left. I tried to edit CSS, but maybe its HTML fault? HTML

    <div class="outer">
  <div class="inner">
    <table>
        <tr>
          <th>Header A</th>
          <td>col 1 - A</td>
          <td>col 2 - A (WITH LONGER CONTENT)</td>
          <td>col 3 - A</td>
          <td>col 4 - A</td>
          <td>col 5 - A</td>
        </tr>
        <tr>
          <th>Header B</th>
          <td>col 1 - B</td>
          <td>col 2 - B</td>
          <td>col 3 - B</td>
          <td>col 4 - B</td>
          <td>col 5 - B</td>
        </tr>
        <tr>
          <th>Header C</th>
          <td>col 1 - C</td>
          <td>col 2 - C</td>
          <td>col 3 - C</td>
          <td>col 4 - C</td>
          <td>col 5 - C</td>
        </tr>
    </table>
  </div>
</div>

CSS:

table {
  table-layout: fixed; 
  width: 100%;
  *margin-left: -100px;/*ie7*/
}
td, th {
  vertical-align: top;
  border-top: 1px solid #ccc;
  padding:10px;
  width:100px;
}
th {
  position:absolute;
  *position: relative; /*ie7*/
  left:0; 
  width:100px;
}
.outer {position:relative}
.inner {
  overflow-x:scroll;
  overflow-y:visible;
  width:400px; 
  margin-left:100px;
}

Check this link for Your answer http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body — Bugfixer, Feb 18 '15 at 12:04

score 0 · Answer 1 · answered Feb 18 '15 at 12:14

0

try this http://jsfiddle.net/5PFak/71/

change some layout of your table.

answered Feb 18 '15 at 12:14

anji

344
3
6

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

It looks like it's more of a CSS issue although I'm not sure you've written your HTML the proper way either.

This thread should help you solve your problem.

Tell me if it doesn't but I'm sure you'll find an answer by trying "fixed headers table" at google anyway.

edited May 23 '17 at 11:43

Community

1
1

answered Feb 18 '15 at 12:18

Another Joe

61
8

CSS, Header-Absolute, scrolling down

2 Answers2