Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    Keeping the top (header) row, fixed to the top when scrolling vertically

    Hello,

    I really need your help.

    I can't seem to figure out as to how to get the top header row, to be frozen to the stop in my datatable

    Here is a link to the fiddle here:
    Edit fiddle - JSFiddle

    Here is the CSS markup:
    Code:
    #data_container {
        border: 1px solid blue;
        width: 100%;
         overflow-x: scroll;
    }
    #data_wrapper {
        width: 100%;
        border-right:0px;
        height: 150px;
    }
    #data_headers, #data_body {
        width: 100%;
        padding: 0px;
        border-spacing: 0px;
        table-layout: fixed;
    }
    #data_headers {
    
    }
    #data_body {
    
    }
    #data_headers td, #data_body td {
        border-right: 1px solid green;
        width: 150px;
    }
    #data_headers td {
        border-bottom: 1px solid black;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,462
    Thanks
    23
    Thanked 634 Times in 633 Posts
    CSS by it's self don't help much. Post HTML for the table please.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    The HTML is in the Fiddle.

    And I don't know if it's been done before, but could you just set the header to wrap to top in the div that contains all the cells?

    Or you could just have a scroll box with the cells in it, and the header directly above that, creating the illusion of a singular table with a scroll bar, when in reality the header is disconnected.
    (I know this could cause layout issues. Just a suggestion.)
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • Users who have thanked Nerevarine for this post:

    jason_kelly (04-05-2014)

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,462
    Thanks
    23
    Thanked 634 Times in 633 Posts
    A place to start at:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {margin:0 0 1em}
    table p {margin :0}
    .wrap {
    	margin:50px 0 0 2%;
    	width:95%;
    	float:left;
    	position:relative;
    	height:200px;
    	overflow:hidden;
    	padding:25px 0 0;
    	background:#bbb;
    	border:1px solid #000;
    }
    .inner {
    	height:200px;
    	overflow:auto;
    }
    table {
    	width:100%;
    	margin:0 0 0 -1px;
    	border-collapse:collapse;
    }
    td {
    	padding:5px;
    	border:1px solid #000;
    	text-align:center;
    	background:#fff;
    }
    tfoot th, thead th {
    	font-weight:bold;
    	text-align:center;
    	border:1px solid #000;
    	padding:0 3px 0 5px;
    	background:#999;
    	color:#fff;
    }
    thead th{
    	padding:0 3px 0 30px;
    }
    thead tr p {
    	position:absolute;
    	top:3px;
    }
    </style>
    </head>
    
    
    <body>
    <div class="wrap">
    	<div class="inner">
    		<table id="data" cellspacing="0" cellpadding="0">
    			<thead>
    				<tr>
    					<th><p>Header1</p></th>
    					<th><p>Header2</p></th>
    					<th><p>Header3</p></th>
    					<th><p>Header4</p></th>
    					<th><p>Header5</p></th>
    					<th><p>Header6</p></th>
    					<th><p>Header7</p></th>
    					<th><p>Header8</p></th>
    					<th><p>Header9</p></th>
    					<th><p>Header10</p></th>
    				</tr>
    			</thead>
    			<tfoot>
    				<tr>
    					<th><p>Header1</p></th>
    					<th><p>Header2</p></th>
    					<th><p>Header3</p></th>
    					<th><p>Header4</p></th>
    					<th><p>Header5</p></th>
    					<th><p>Header6</p></th>
    					<th><p>Header7</p></th>
    					<th><p>Header8</p></th>
    					<th><p>Header9</p></th>
    					<th><p>Header10</p></th>
    				</tr>
    			</tfoot>
    			<tbody>
    				<tr>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    				</tr>
    				<tr>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    				</tr>
    				<tr>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    				</tr>
    				<tr>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    				</tr>
    				<tr>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    				</tr>
    				<tr>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    				</tr>
    				<tr>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    				</tr>
    				<tr>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    				</tr>
    				<tr>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    				</tr>
    				<tr>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    	                <td>Some content</td>
    				</tr>
    			</tbody>
    		</table>
    	</div>
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    jason_kelly (04-05-2014)

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    A huge thanks for this Sunfighter!

    Ok, that seems to solve it in the interim, but I will have upwards of 20 columns and would like the ability to also scroll horizontally. The problem is that if you change the width in the .wrap to let's say 400px and then you scroll, the headers don't seem to want to move in sync with the columns (at least on IE10)

    How can that problem be remedied?

    Cheers

    and thanks again

    Jay


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •