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.
I think this method is the simplest.
html>body div.tableContainer table {
width: 756px
}
Change to
html>body div.tableContainer table {
width: 774px
}
Demo:
<!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>
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.
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.
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,
<!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>
Hi,
You need to apply the CSS that Fantastic5 provides above, then make sure that your HTML has this structure:
E.g.
<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.
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
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.
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:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
after your opening <head> tag.
E.g.
<!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.
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.
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.
<!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.
[ot]
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.[/ot]
No worries, it’s sometimes hard to judge when a new thread should begin at times. It may indeed end up being two questions.
Thanks for merging. Will keep in mind the off topic too.
I will look in to the code that Paul posted.
Thanks.
Hi Jesh,
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
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:
<!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.
Many thanks. This looks good!!!
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
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-scroll-double-header.htm
You will need to test as I don’t really know how it will stand up in use.