1

I have been able to freeze my table headers and have the widths of the headers and the rest of the rows match up, but I am not able to get my first two rows to show out from under the header. 

table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    background:#eaebec;
    border:#ccc 1px solid;
    border-radius:3px;
    border-collapse:collapse;
    border-spacing: 0;
    box-shadow: 0 1px 2px #d1d1d1;
}
table th {
    padding:2px 2px 2px 2px;
    border-top:0;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #ededed;
}
table th:first-child {
    text-align: left;
}
table tr:first-child th:first-child {
    border-top-left-radius:3px;
    border-left: 0;
}
table tr:first-child th:last-child {
    border-top-right-radius:3px;
}
table tr {
    text-align: center;
}
table td:first-child {
    text-align: left;
    border-left: 0;
}
table td {
    padding:2px 2px 2px 2px;
    border-top:0;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    white-space: nowrap;
}
table tr:last-child td {
    border-bottom:0;
}
table tr:last-child td:first-child {
    border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
    border-bottom-right-radius:3px;
}
table tr:hover td {
    background: #F7FE2E;
}
table th,
table td {
    width: 65px;
}
table tr,
table td {
    width: 65px;
    min-width: 65px;
}
#wrapper {
    width: auto;
    height: 850px;
    overflow-x: scroll;
    overflow-y: scroll;
}
thead {
    position: fixed;
}
tbody {
    position: relative;
}

So can someone point me in the right direction on how to move the first two rows out from under the header? Let me know if I need to explain more or if I need to add on to my question!

I have added a few things I think I didn't explain http://jsfiddle.net/FyJwZ/4/

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
NickC217
  • 216
  • 2
  • 6
  • 14
  • Frankly, I'd be surprised if this works as you say it does. But assuming it does, have you tried adding `margin-top` to your `tbody` styles? – Kevin Boucher Aug 29 '13 at 20:24
  • I added margin-top to my tbody and it did not do anything. What is wrong and why do you think it shouldn't work @KevinBoucher – NickC217 Aug 29 '13 at 20:27
  • Yeah, the fiddle demonstrates that this issue is not an easy one to fix. This usually requires some JavaScript (even though it seems that simple CSS should work). – Kevin Boucher Aug 29 '13 at 20:36
  • 1
    The header columns do not appear to line up with the body columns. You might look at this: http://stackoverflow.com/questions/11499973/how-to-fixed-table-header-no-jquery or this: http://www.fixedheadertable.com/ – Kevin Boucher Aug 29 '13 at 20:37
  • @KevinBoucher Thanks I will look into trying to implement how they did it in the link you posted. If there is any other options to I wouldn't mind seeing those as well. – NickC217 Aug 29 '13 at 20:40

2 Answers2

5

Here is a jsFiddle in working order: http://jsfiddle.net/FyJwZ/7/

These are the changes I made

/* this is what will do the trick */
tbody {
    display: block;
    padding-top: 21px;
}

thead {
    z-index: 1; /* put on top of other rows */
}

thead tr td {
    background: #ddd;
}

/* only using !important to override your styles below */
td {
    margin-left: 0 !important;
    width: 100px !important;
}

UPDATE

Here is a more complete example: http://jsfiddle.net/kzuwR/14/

Kevin Jantzer
  • 9,215
  • 2
  • 28
  • 52
  • `display: block` on a table body... doesn't break anything? My mind is blown. – user1618143 Aug 29 '13 at 20:50
  • I don't believe it will break anything. – Kevin Jantzer Aug 29 '13 at 20:52
  • Yeah, it seems to work fine; I just wouldn't have expected it. – user1618143 Aug 29 '13 at 20:54
  • I have a feeling that my php `while` statement is throwing this all off. Edit: Also margin-top doesn't seem to do anything. – NickC217 Aug 29 '13 at 20:57
  • because any time I put something under `table tr:first-child td:first-child{}` it effects every row in the `while` statement. It is weird. – NickC217 Aug 29 '13 at 21:00
  • And I put the code from the Fiddle that @KevinJantzer made and it still doesn't work on my page with my php code. – NickC217 Aug 29 '13 at 21:01
  • Nicely done. There's a little content bleed above the header as you scroll, but it works fairly well. I'd add `#wrapper { float: left; }` to size the wrapper `div` appropriately. – Kevin Boucher Aug 29 '13 at 21:05
  • Ok, with playing around with it I figured out why it wasn't working. I had to replace my `` tags in the table head to ``. Now it works. Next question are you guys able to tell me how to get it to scroll to the right and the headers move too? Here is the update fiddle with my data: http://jsfiddle.net/kzuwR/10/ – NickC217 Aug 30 '13 at 13:21
  • @NickCurran — it's not possible to make the header scroll left and right with CSS only, but with a little JavaScript you can. Here is an example: http://jsfiddle.net/kzuwR/14/ Note: some of the CSS had to change. The `overflow:scroll` styles were removed from the `wrapper` and put on the `table` and `thead` – Kevin Jantzer Aug 30 '13 at 15:28
  • @KevinJantzer Ok, it works in the fiddle, but when I take the info from the Fiddle and put in my real pages, it doesn't work. – NickC217 Aug 30 '13 at 18:33
  • I am not sure I have the javascript working, if that is what makes the header move. – NickC217 Aug 30 '13 at 18:44
  • @NickCurran Yes, the JS is what makes the header scroll horizontally. Most likely the javascript is being executed before the table is actually in the DOM. If your are using jQuery, put the JS code in between: `$(function() { /*code here */ });` Or you can use `onload` on the table – Kevin Jantzer Aug 30 '13 at 18:48
  • Ok, I put the javascript code in a separate page and have the page reference ``. Then I put the table id in as well as `onload='scrollHeader'` Is that wrong? – NickC217 Aug 30 '13 at 18:54
  • Well I have also put it exactly how it is when I do view page source and it doesn't work, unless I make a page from the view page source from Fiddle. I am not sure why it doesn't work on my actual page, also none of the CSS works in IE10. – NickC217 Aug 30 '13 at 19:28
  • That's cause IE is lame! – Kevin Jantzer Aug 30 '13 at 20:19
  • @KevinJantzer I hear you there. I really only use chrome. Now to find out how to make the first column freeze as well. Thanks again for the help! – NickC217 Aug 30 '13 at 20:35
0

You've set thead{position:fixed}. I've never actually used position:fixed on a table header like that, but I assume it's pinning it to the top of the frame like you want. The problem is that fixed-position elements don't take up any space on the page - stuff slides right in underneath them. You should be able to compensate for this by adding a margin-top to your tbody, or, if that doesn't work, to table tr:first-child.

If that doesn't work either, I'd just stick an appropriately-sized empty tr at the top and be done with it.

Edit: Actually, playing around with your fiddle, it doesn't look like the fixed-position table header is correctly setting the widths of your rows on my browser. What browser are you using? This appears to be the type of unconventional CSS that can cause cross-browser compatibility issues. (Tables tend to be tricky that way.)

user1618143
  • 1,728
  • 1
  • 13
  • 27