SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table body scroll

    Hi,

    in the below link, it's a scrollable table body with pure CSS

    http://www.imaputz.com/cssStuff/bigFourVersion.html can i scroll the body alone, without scroll bar appearing. If so, can someone demostrate it how

    i need to scroll the table body alone. all example says only with scrollbar. so, can i do scroll without scrollbar.just scroll up and down the table body. the scroll is only for table body.
    it could be a css , JS or jQuery solution. I am clueless. So, helping hands plz...

    Thanks.

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this method is the simplest.

    html>body div.tableContainer table {
    width: 756px
    }
    Change to

    html>body div.tableContainer table {
    width: 774px
    }
    Demo:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
    <title>Pure CSS Scrollable Table with Fixed Header</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="language" content="en-us" />
    <style type="text/css">
    <!--
    /* Terence Ordona, portal[AT]imaputz[DOT]com         */
    /* http://creativecommons.org/licenses/by-sa/2.0/    */
    
    /* begin some basic styling here                     */
    body {
    	background: #FFF;
    	color: #000;
    	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	margin: 10px;
    	padding: 0
    }
    
    table, td, a {
    	color: #000;
    	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
    }
    
    h1 {
    	font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	margin: 0 0 5px 0
    }
    
    h2 {
    	font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	margin: 0 0 5px 0
    }
    
    h3 {
    	font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color: #008000;
    	margin: 0 0 15px 0
    }
    /* end basic styling                                 */
    
    /* define height and width of scrollable area. Add 16px to width for scrollbar          */
    div.tableContainer {
    	clear: both;
    	border: 1px solid #963;
    	height: 285px;
    	overflow: auto;
    	width: 756px
    }
    
    /* Reset overflow value to hidden for all non-IE browsers. */
    html>body div.tableContainer {
    	overflow: hidden;
    	width: 756px
    }
    
    /* define width of table. IE browsers only                 */
    div.tableContainer table {
    	float: left;
    	width: 740px
    }
    
    /* define width of table. Add 16px to width for scrollbar.           */
    /* All other non-IE browsers.                                        */
    html>body div.tableContainer table {
    	width: 774px
    }
    
    /* set table header to a fixed position. WinIE 6.x only                                       */
    /* In WinIE 6.x, any element with a position property set to relative and is a child of       */
    /* an element that has an overflow property set, the relative value translates into fixed.    */
    /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
    thead.fixedHeader tr {
    	position: relative
    }
    
    /* set THEAD element to have block level attributes. All other non-IE browsers            */
    /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
    html>body thead.fixedHeader tr {
    	display: block
    }
    
    /* make the TH elements pretty */
    thead.fixedHeader th {
    	background: #C96;
    	border-left: 1px solid #EB8;
    	border-right: 1px solid #B74;
    	border-top: 1px solid #EB8;
    	font-weight: normal;
    	padding: 4px 3px;
    	text-align: left
    }
    
    /* make the A elements pretty. makes for nice clickable headers                */
    thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
    	color: #FFF;
    	display: block;
    	text-decoration: none;
    	width: 100%
    }
    
    /* make the A elements pretty. makes for nice clickable headers                */
    /* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
    thead.fixedHeader a:hover {
    	color: #FFF;
    	display: block;
    	text-decoration: underline;
    	width: 100%
    }
    
    /* define the table content to be scrollable                                              */
    /* set TBODY element to have block level attributes. All other non-IE browsers            */
    /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
    /* induced side effect is that child TDs no longer accept width: auto                     */
    html>body tbody.scrollContent {
    	display: block;
    	height: 262px;
    	overflow: auto;
    	width: 100%
    }
    
    /* make TD elements pretty. Provide alternating classes for striping the table */
    /* http://www.alistapart.com/articles/zebratables/                             */
    tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
    	background: #FFF;
    	border-bottom: none;
    	border-left: none;
    	border-right: 1px solid #CCC;
    	border-top: 1px solid #DDD;
    	padding: 2px 3px 3px 4px
    }
    
    tbody.scrollContent tr.alternateRow td {
    	background: #EEE;
    	border-bottom: none;
    	border-left: none;
    	border-right: 1px solid #CCC;
    	border-top: 1px solid #DDD;
    	padding: 2px 3px 3px 4px
    }
    
    /* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
    /* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
    /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
    html>body thead.fixedHeader th {
    	width: 200px
    }
    
    html>body thead.fixedHeader th + th {
    	width: 240px
    }
    
    html>body thead.fixedHeader th + th + th {
    	width: 316px
    }
    
    /* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
    /* All other non-IE browsers.                                            */
    /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
    html>body tbody.scrollContent td {
    	width: 200px
    }
    
    html>body tbody.scrollContent td + td {
    	width: 240px
    }
    
    html>body tbody.scrollContent td + td + td {
    	width: 300px
    }
    -->
    </style>
    <div id="tableContainer" class="tableContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
    <thead class="fixedHeader">
    	<tr>
    		<th><a href="#">Header 1</a></th>
    		<th><a href="#">Header 2</a></th>
    		<th><a href="#">Header 3</a></th>
    	</tr>
    </thead>
    <tbody class="scrollContent">
    	<tr>
    		<td>Cell Content 1</td>
    		<td>Cell Content 2</td>
    		<td>Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>More Cell Content 1</td>
    		<td>More Cell Content 2</td>
    		<td>More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>Even More Cell Content 1</td>
    		<td>Even More Cell Content 2</td>
    		<td>Even More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>And Repeat 1</td>
    		<td>And Repeat 2</td>
    		<td>And Repeat 3</td>
    	</tr>
    	<tr>
    		<td>Cell Content 1</td>
    		<td>Cell Content 2</td>
    		<td>Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>More Cell Content 1</td>
    		<td>More Cell Content 2</td>
    		<td>More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>Even More Cell Content 1</td>
    		<td>Even More Cell Content 2</td>
    		<td>Even More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>And Repeat 1</td>
    		<td>And Repeat 2</td>
    		<td>And Repeat 3</td>
    	</tr>
    	<tr>
    		<td>Cell Content 1</td>
    		<td>Cell Content 2</td>
    		<td>Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>More Cell Content 1</td>
    		<td>More Cell Content 2</td>
    		<td>More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>Even More Cell Content 1</td>
    		<td>Even More Cell Content 2</td>
    		<td>Even More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>And Repeat 1</td>
    		<td>And Repeat 2</td>
    		<td>And Repeat 3</td>
    	</tr>
    	<tr>
    		<td>Cell Content 1</td>
    		<td>Cell Content 2</td>
    		<td>Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>More Cell Content 1</td>
    		<td>More Cell Content 2</td>
    		<td>More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>Even More Cell Content 1</td>
    		<td>Even More Cell Content 2</td>
    		<td>Even More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>And Repeat 1</td>
    		<td>And Repeat 2</td>
    		<td>And Repeat 3</td>
    	</tr>
    	<tr>
    		<td>Cell Content 1</td>
    		<td>Cell Content 2</td>
    		<td>Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>More Cell Content 1</td>
    		<td>More Cell Content 2</td>
    		<td>More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>Even More Cell Content 1</td>
    		<td>Even More Cell Content 2</td>
    		<td>Even More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>And Repeat 1</td>
    		<td>And Repeat 2</td>
    		<td>And Repeat 3</td>
    	</tr>
    	<tr>
    		<td>Cell Content 1</td>
    		<td>Cell Content 2</td>
    		<td>Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>More Cell Content 1</td>
    		<td>More Cell Content 2</td>
    		<td>More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>Even More Cell Content 1</td>
    		<td>Even More Cell Content 2</td>
    		<td>Even More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>And Repeat 1</td>
    		<td>And Repeat 2</td>
    		<td>And Repeat 3</td>
    	</tr>
    	<tr>
    		<td>Cell Content 1</td>
    		<td>Cell Content 2</td>
    		<td>Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>More Cell Content 1</td>
    		<td>More Cell Content 2</td>
    		<td>More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>Even More Cell Content 1</td>
    		<td>Even More Cell Content 2</td>
    		<td>Even More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>And Repeat 1</td>
    		<td>And Repeat 2</td>
    		<td>And Repeat 3</td>
    	</tr>
    	<tr>
    		<td>Cell Content 1</td>
    		<td>Cell Content 2</td>
    		<td>Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>More Cell Content 1</td>
    		<td>More Cell Content 2</td>
    		<td>More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>Even More Cell Content 1</td>
    		<td>Even More Cell Content 2</td>
    		<td>Even More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>And Repeat 1</td>
    		<td>And Repeat 2</td>
    		<td>And Repeat 3</td>
    	</tr>
    	<tr>
    		<td>Cell Content 1</td>
    		<td>Cell Content 2</td>
    		<td>Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>More Cell Content 1</td>
    		<td>More Cell Content 2</td>
    		<td>More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>Even More Cell Content 1</td>
    		<td>Even More Cell Content 2</td>
    		<td>Even More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>And Repeat 1</td>
    		<td>And Repeat 2</td>
    		<td>And Repeat 3</td>
    	</tr>
    	<tr>
    		<td>Cell Content 1</td>
    		<td>Cell Content 2</td>
    		<td>Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>More Cell Content 1</td>
    		<td>More Cell Content 2</td>
    		<td>More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>Even More Cell Content 1</td>
    		<td>Even More Cell Content 2</td>
    		<td>Even More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>And Repeat 1</td>
    		<td>And Repeat 2</td>
    		<td>And Repeat 3</td>
    	</tr>
    	<tr>
    		<td>Cell Content 1</td>
    		<td>Cell Content 2</td>
    		<td>Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>More Cell Content 1</td>
    		<td>More Cell Content 2</td>
    		<td>More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>Even More Cell Content 1</td>
    		<td>Even More Cell Content 2</td>
    		<td>Even More Cell Content 3</td>
    	</tr>
    	<tr>
    		<td>End of Cell Content 1</td>
    		<td>End of Cell Content 2</td>
    		<td>End of Cell Content 3</td>
    	</tr>
    </tbody>
    </table>
    
    
    </body></html>

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. You are truly fantastic with your reply. The demo has the feature i requested.
    i might come up with questions while implementing this.

    right now only one question, Does it support all browsers(mozilla, chrome,firefox,opera) including IE 9 and 10 ?

    Thanks.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Jesh View Post
    right now only one question, Does it support all browsers(mozilla, chrome,firefox,opera) including IE 9 and 10 ?
    This is something you can easily test yourself.
    If there is a particular browser you don't have access to, let us know and we will help.

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Can you demonstrate how to implement the above css in to this code. i am confused in CSS declaration.

    i tried, but it did not work. so, i ask,

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    
    <style>
    #container1
    {
    	position: relative;
    	top: 0;
    	left: 0;
    	margint: 20px ;
    	padding: 0;
    	clear: both;
    	overflow:visible;
    	min-height: 405px
    }
    
    div
    {
    	display:block; 
    }
    
    .class0 .class1
    {
    	overflow:visible;
    }
    
    .class1
    {
    
    width: 100%;
    min-width: 952px;
    margin: 0 auto;
    
    }
    
    .class2
    {
    	display:block;
    }
    
    #container1 .class3 . class4{
    	overflow:visible;
    }
    
    .class3 {
    position: relative;
    overflow: hidden;
    margin: 14px 0;
    padding: 0;
    }
    
    .class4 {
    margin: 0;
    position: relative;
    overflow: hidden;
    }
    
    .tableclass1{
    border-width:0;
    border-top:0;
    font-size: 10px;
    width: 100%;
    }
    table
    {
      display:table-header-group;
    }
    td, th{
    	display:table-cell
    }
    
    tbody{
    	display:table-row-group;
    }
    
    </style>
    
    </head>
    
    <body>
    
     <div id ="container1" class="class0">
      	<div class="class1 class2">
          <div id="id1" class="class3">
             <div class="class4">
               <table class="tableclass1">
                <thead class="theadclass">
                <tr class="trclass" style="text-align:center; background:#C93;">
                <th>InfoHeader1</th>
                <th>InfoHeader2</th>
                <th>InfoHeader3</th>
                <th>InfoHeader4</th>
                <th>InfoHeader5</th>
                </tr>
    </thead>
                <tbody>
                <tr>
                <td>Item 1</td><td>Item 1</td><td>Item 1</td><td>Item 1</td><td>Item 1</td>
                </tr>
                <tr>
                <td>Item 1A</td><td>Item 1B</td><td>Item 1C</td><td>Item 1</td><td>Item 1</td>
                </tr>
                <tr>
                <td>Item 1A</td><td>Item 1B</td><td>Item 1C</td><td>Item 1</td><td>Item 1</td>
                </tr>
                <tr>
                <td>Item 1A</td><td>Item 1B</td><td>Item 1C</td><td>Item 1</td><td>Item 1</td>
                </tr>
                <tr><td>Item 1A</td><td>Item 1B</td><td>Item 1C</td><td>Item 1</td><td>Item 1</td>
                </tr>
                
                </tbody>
                </table>
     </div> <!-- end of class4 -->
     </div><!-- end of id1 -->
     </div><!--end of class1 class2-->
     
     </div> <!-- container1 -->
    </body>
    </html>
    Last edited by ralph.m; May 27, 2013 at 06:52. Reason: added code tags

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by Jesh View Post
    Can you demonstrate how to implement the above css in to this code. i am confused in CSS declaration.
    You need to apply the CSS that Fantastic5 provides above, then make sure that your HTML has this structure:

    E.g.

    HTML Code:
    <div id="tableContainer" class="tableContainer">
      <table class="scrollTable">
        <thead class="fixedHeader">
          ...
        </thead>
        <tbody class="scrollContent">
          ...
        </tbody>
      </table>
    </div>
    Also, please use code tags when posting large amounts of code.
    It makes your post considerably easier to read.
    You can find them if you click "Go Advanced" in the "Syntax" drop down menu.

  7. #7
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    i work in windows7 and with IE9. the demo code does not work in IE So,how to make it work in all browsers?

    Thanks,
    Jesh

  8. #8
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <tbody> scroll - cross-browser

    Hi,

    I am reposting this question in sitepoint under CSS. I need a CSS approach to scroll my table body without the apperance of scroll bar. Is it possible through CSS? If so, can i get an demostrated example and code. And i am also aiming at cross-browser compatability with all latest versions(firefox,safari,chrome,IE-8,9,10).

    Thanks.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    So, a couple of things are wrong with the code from post#2
    First off, the closing </head> tag and the opening <body> tag are missing.
    Also, the closing </div> tag after the table is missing.

    For me, if I add those things, the document previews fine in IE9 standards mode.
    To force IE9 into standards mode, you could just add:

    HTML Code:
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    after your opening <head> tag.

    E.g.

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Pure CSS Scrollable Table with Fixed Header</title>
        <style type="text/css">
          ...
        </style>
      </head>
      <body>
        <div id="tableContainer" class="tableContainer">
          <table class="scrollTable">
            <thead class="fixedHeader">
              ...
            </thead>
            <tbody class="scrollContent">
               ...
            </tbody>
          </table>
        </div>
      </body>
    </html>
    Other than that, this is a CSS question, so it is better to start a new thread in the CSS forum.

  10. #10
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. One more question, is there a JS or jQuery solution for scrolling tbody without scroll bar appearing or scroll appearing as needed after a min height of tbody . Searched a lot. Results are not apt. It would be great to have a solution.

    Thanks.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi.

    I merged the threads as you asked the same question in the CSS forum. Please don't repost the same question twice but ask for the thread to be moved if another forum is more suitable.

    I've read through the thread but am a little unclear as to why you would want a scrollable table but not have a scrollbar? Users won't know that they can scroll the table unless you provide the visual clue of the scrollbar. Unless you meant something else?

    You can create a fixed header for a table and scroll the body and here is an example from years ago.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <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:green;
    	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:yellow;
    }
    tfoot th, thead th {
    	font-weight:bold;
    	text-align:center;
    	border:1px solid #000;
    	padding:0 3px 0 5px;
    	background:green;
    	color:#fff;
    }
    thead th {border:none;}
    thead tr p {
    	position:absolute;
    	top:3px;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .inner {overflow-x:hidden}
    
    </style>
    <![endif]-->
    
    </head>
    
    
    <body>
    <h1>Table with fixed header in IE6 - 8, Firefox 2.+, Safari 3 and Opera 9.5+</h1>
    <p>Notes: The header is part of the same table and not a separate table on top. The width of the table cells or header cells is not defined and will match whatever content is in the cells. The table can be a fluid length and will resize within reasonable limits accordingly.</p>
    <div class="wrap">
    	<div class="inner">
    		<table id="data" cellspacing="0" cellpadding="0">
    			<thead>
    				<tr>
    					<th><p>Jan</p></th>
    					<th><p>Feb</p></th>
    					<th><p>Mar</p></th>
    					<th><p>Apr</p></th>
    					<th><p>May</p></th>
    					<th><p>Jun</p></th>
    					<th><p>Jul</p></th>
    					<th><p>Aug</p></th>
    					<th><p>September</p></th>
    					<th><p>Oct</p></th>
    					<th><p>Nov</p></th>
    					<th><p>Dec</p></th>
    				</tr>
    			</thead>
    			<tfoot>
    				<tr>
    					<th><p>Jan</p></th>
    					<th><p>Feb</p></th>
    					<th><p>Mar</p></th>
    					<th><p>Apr</p></th>
    					<th><p>May</p></th>
    					<th><p>Jun</p></th>
    					<th><p>Jul</p></th>
    					<th><p>Aug</p></th>
    					<th><p>September</p></th>
    					<th><p>Oct</p></th>
    					<th><p>Nov</p></th>
    					<th><p>Dec</p></th>
    				</tr>
    			</tfoot>
    			<tbody>
    				<tr>
    					<td>1</td>
    					<td>3</td>
    					<td>5</td>
    					<td>1</td>
    					<td>1</td>
    					<td>3</td>
    					<td>1</td>
    					<td>5</td>
    					<td>7</td>
    					<td>1</td>
    					<td>1</td>
    					<td>3</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>3</td>
    					<td>5</td>
    					<td>1</td>
    					<td>1</td>
    					<td>3</td>
    					<td>1</td>
    					<td>1</td>
    					<td>1</td>
    					<td>3 more data</td>
    					<td>5</td>
    					<td>7</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>4</td>
    					<td>6</td>
    					<td>1</td>
    					<td>1</td>
    					<td>3</td>
    					<td>1</td>
    					<td>23</td>
    					<td>4</td>
    					<td>1</td>
    					<td>6</td>
    					<td>6</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>1</td>
    					<td>6</td>
    					<td>1</td>
    					<td>4</td>
    					<td>7</td>
    					<td>1</td>
    					<td>7</td>
    					<td>1</td>
    					<td>1</td>
    					<td>3</td>
    					<td>6</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>3 with more data</td>
    					<td>2</td>
    					<td>3</td>
    					<td>3</td>
    					<td>3</td>
    					<td>8</td>
    					<td>1</td>
    					<td>1</td>
    					<td>2</td>
    					<td>8</td>
    					<td>6</td>
    				</tr>
    				<tr>
    					<td>6</td>
    					<td>4</td>
    					<td>4</td>
    					<td>4</td>
    					<td>2</td>
    					<td>9</td>
    					<td>4</td>
    					<td>4</td>
    					<td>6</td>
    					<td>1</td>
    					<td>1</td>
    					<td>3</td>
    				</tr>
    				<tr>
    					<td>1</td>
    					<td>1</td>
    					<td>3</td>
    					<td>7</td>
    					<td>4</td>
    					<td>5</td>
    					<td>5</td>
    					<td>2</td>
    					<td>0</td>
    					<td>3</td>
    					<td>23</td>
    					<td>6</td>
    				</tr>
    				<tr>
    					<td>7</td>
    					<td>4</td>
    					<td>2</td>
    					<td>67</td>
    					<td>2</td>
    					<td>1</td>
    					<td>1</td>
    					<td>3</td>
    					<td>1</td>
    					<td>4</td>
    					<td>4</td>
    					<td>4</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>4</td>
    					<td>3</td>
    					<td>1</td>
    					<td>1</td>
    					<td>1</td>
    					<td>3</td>
    					<td>2</td>
    					<td>2</td>
    					<td>5</td>
    					<td>65</td>
    					<td>4</td>
    				</tr>
    				<tr>
    					<td>2</td>
    					<td>4</td>
    					<td>4</td>
    					<td>1</td>
    					<td>2</td>
    					<td>13</td>
    					<td>6</td>
    					<td>1</td>
    					<td>1</td>
    					<td>3</td>
    					<td>7</td>
    					<td>4</td>
    				</tr>
    			</tbody>
    		</table>
    	</div>
    </div>
    </body>
    </html>
    There are limitations to the styling of the header due to the method used to make this work but unlike other examples shown it works with variable width data.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    Please don't repost the same question twice but ask for the thread to be moved if another forum is more suitable.
    To be fair to @Jesh, I suggested starting a new thread. I had however envisaged the OP taking the working code from above and reformulating their question more succinctly, as opposed to reposting the same one.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Pullo View Post
    Off Topic:


    To be fair to @Jesh, I suggested starting a new thread. I had however envisaged the OP taking the working code from above and reformulating their question more succinctly, as opposed to reposting the same one.
    No worries, it's sometimes hard to judge when a new thread should begin at times. It may indeed end up being two questions.

  14. #14
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for merging. Will keep in mind the off topic too.
    I will look in to the code that Paul posted.

    Thanks.

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi Jesh,

    Quote Originally Posted by Jesh View Post
    Will keep in mind the off topic too.
    Off topic just means that I wanted to add something to the discussion that was not directly related to your original question (i.e. an off topic comment).
    It was not in regard to anything you did

  16. #16
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I have tested this code and it works nicely. However how would you use it for a second table in the same html document that has different column widths and has a header that is two rows deep: i.e

    Main Header(fixed)
    h1 h2 h3(fixed)
    col col col
    col col col

    I don't seem to be able to define a second set of columns and headings

    Thanks

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SeanDP View Post
    Hi

    I have tested this code and it works nicely. However how would you use it for a second table in the same html document that has different column widths and has a header that is two rows deep: i.e

    Main Header(fixed)
    h1 h2 h3(fixed)
    col col col
    col col col

    I don't seem to be able to define a second set of columns and headings

    Thanks
    Hi,

    The column widths are auto and therefore should match the data you use.

    The header though is limited in styling abilities as it is removed from the flow. You can make a double header like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <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:50px 0 0;
    	background:green;
    	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:yellow;
    }
    tfoot th, thead th {
    	font-weight:bold;
    	text-align:left;
    	border:1px solid #000;
    	padding:0 3px 0 5px;
    	background:green;
    	color:#fff;
    }
    thead th { border:none; }
    thead tr div {
    	position:absolute;
    	top:3px;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .inner {overflow-x:hidden}
    
    </style>
    <![endif]-->
    
    </head>
    
    <body>
    <h1>Table with fixed header in IE6 - 8, Firefox 2.+, Safari 3 and Opera 9.5+</h1>
    <p>Notes: The header is part of the same table and not a separate table on top. The width of the table cells or header cells is not defined and will match whatever content is in the cells. The table can be a fluid length and will resize within reasonable limits accordingly.</p>
    <div class="wrap">
    		<div class="inner">
    				<table id="data" cellspacing="0" cellpadding="0">
    						<thead>
    								<tr>
    										<th><div>
    														<p>Jan</p>
    														<p>more</p>
    												</div></th>
    										<th><div>
    														<p>Feb</p>
    														<p>more</p>
    												</div></th>
    										<th><div>
    														<p>Mar</p>
    														<p>more</p>
    												</div></th>
    										<th><div>
    														<p>Apr</p>
    														<p>more</p>
    												</div></th>
    										<th><div>
    														<p>May</p>
    														<p>more</p>
    												</div></th>
    										<th><div>
    														<p>Jun</p>
    														<p>more</p>
    												</div></th>
    										<th><div>
    														<p>Jul</p>
    														<p>more</p>
    												</div></th>
    										<th><div>
    														<p>Aug</p>
    														<p>more</p>
    												</div></th>
    										<th><div>
    														<p>September</p>
    														<p>more</p>
    												</div></th>
    										<th><div>
    														<p>Oct</p>
    														<p>more</p>
    												</div></th>
    										<th><div>
    														<p>Nov</p>
    														<p>more</p>
    												</div></th>
    										<th><div>
    														<p>Dec</p>
    														<p>more</p>
    												</div></th>
    								</tr>
    						</thead>
    						<tfoot>
    								<tr>
    										<th><p>Jan</p></th>
    										<th><p>Feb</p></th>
    										<th><p>Mar</p></th>
    										<th><p>Apr</p></th>
    										<th><p>May</p></th>
    										<th><p>Jun</p></th>
    										<th><p>Jul</p></th>
    										<th><p>Aug</p></th>
    										<th><p>September</p></th>
    										<th><p>Oct</p></th>
    										<th><p>Nov</p></th>
    										<th><p>Dec</p></th>
    								</tr>
    						</tfoot>
    						<tbody>
    								<tr>
    										<td>1</td>
    										<td>3</td>
    										<td>5</td>
    										<td>1</td>
    										<td>1</td>
    										<td>3</td>
    										<td>1</td>
    										<td>5</td>
    										<td>7</td>
    										<td>1</td>
    										<td>1</td>
    										<td>3</td>
    								</tr>
    								<tr>
    										<td>1</td>
    										<td>3</td>
    										<td>5</td>
    										<td>1</td>
    										<td>1</td>
    										<td>3</td>
    										<td>1</td>
    										<td>1</td>
    										<td>1</td>
    										<td>3 more data</td>
    										<td>5</td>
    										<td>7</td>
    								</tr>
    								<tr>
    										<td>2</td>
    										<td>4</td>
    										<td>6</td>
    										<td>1</td>
    										<td>1</td>
    										<td>3</td>
    										<td>1</td>
    										<td>23</td>
    										<td>4</td>
    										<td>1</td>
    										<td>6</td>
    										<td>6</td>
    								</tr>
    								<tr>
    										<td>1</td>
    										<td>1</td>
    										<td>6</td>
    										<td>1</td>
    										<td>4</td>
    										<td>7</td>
    										<td>1</td>
    										<td>7</td>
    										<td>1</td>
    										<td>1</td>
    										<td>3</td>
    										<td>6</td>
    								</tr>
    								<tr>
    										<td>2</td>
    										<td>3 with more data</td>
    										<td>2</td>
    										<td>3</td>
    										<td>3</td>
    										<td>3</td>
    										<td>8</td>
    										<td>1</td>
    										<td>1</td>
    										<td>2</td>
    										<td>8</td>
    										<td>6</td>
    								</tr>
    								<tr>
    										<td>6</td>
    										<td>4</td>
    										<td>4</td>
    										<td>4</td>
    										<td>2</td>
    										<td>9</td>
    										<td>4</td>
    										<td>4</td>
    										<td>6</td>
    										<td>1</td>
    										<td>1</td>
    										<td>3</td>
    								</tr>
    								<tr>
    										<td>1</td>
    										<td>1</td>
    										<td>3</td>
    										<td>7</td>
    										<td>4</td>
    										<td>5</td>
    										<td>5</td>
    										<td>2</td>
    										<td>0</td>
    										<td>3</td>
    										<td>23</td>
    										<td>6</td>
    								</tr>
    								<tr>
    										<td>7</td>
    										<td>4</td>
    										<td>2</td>
    										<td>67</td>
    										<td>2</td>
    										<td>1</td>
    										<td>1</td>
    										<td>3</td>
    										<td>1</td>
    										<td>4</td>
    										<td>4</td>
    										<td>4</td>
    								</tr>
    								<tr>
    										<td>2</td>
    										<td>4</td>
    										<td>3</td>
    										<td>1</td>
    										<td>1</td>
    										<td>1</td>
    										<td>3</td>
    										<td>2</td>
    										<td>2</td>
    										<td>5</td>
    										<td>65</td>
    										<td>4</td>
    								</tr>
    								<tr>
    										<td>2</td>
    										<td>4</td>
    										<td>4</td>
    										<td>1</td>
    										<td>2</td>
    										<td>13</td>
    										<td>6</td>
    										<td>1</td>
    										<td>1</td>
    										<td>3</td>
    										<td>7</td>
    										<td>4</td>
    								</tr>
    						</tbody>
    				</table>
    		</div>
    </div>
    </body>
    </html>
    Remember its really the table footer that holds it all together so if you want cell widths to be a set width then address the table foot rows.

    If all you wanted was a table header then just put it in a div above the table as a header as such wouldn't need to be in the table.

  18. #18
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks. This looks good!!!!

  19. #19
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Thanks. It almost does what I need. I have existing Html see attachment that I am trying to replicate with a fixed header.

    I need with this:

    <th><div>

    <p>May</p>

    <p>more</p>

    </div></th>

    To have three separate headings for more so that the cells below map to these three sub headings (not the main heading), but have a main heading above these three like the attachment.

    Any help would be greatly appreciated.

    Sean

    Routeview.png

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Sean,

    That looks awkward

    In a fixed width design as you could probably make it look better but this is the best I could come up with for a fluid width design.

    http://www.pmob.co.uk/temp/table-scr...ble-header.htm

    You will need to test as I don't really know how it will stand up in use.

  21. #21
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great!!! Thanks. I will play around with it...


Bookmarks

Posting Permissions

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