Hi,
I want to ask help from you guys if it is possible to have a non scrolling header in CSS3?
I have my code working in IE7, IE8, and IE9. But when i apply the CSS3, problem starts.
I use position:relative for thead and top: expression(offsetParent.scrollTop). It seems that
it is not working anymore. Any updated approach on this?
Regards,
Jeff
Hi Jeff,
Welcome to Sitepoint 
You’re looking for position: fixed; which locks an element in position and doesn’t scroll.
expressions are IE only and are used for this because fixed positioning isn’t supported in IE6, as well as mobile browsers.
If you’re not worried about IE6 or mobile just add position: fixed and top: 0 to lock an element at the top of the screen.
Hi,
Yes, it is working. But how to adjust the width of each column by percentage?
It is static width there.
Regards,
Jeff
Hi,
Because the width of table header will not be the same as their content.
Regards,
Jeff
Could you provide a link or some example code? It’s a bit hard to understand what you are asking here.
Hi,
Here is the example.
<html>
<head>
<title>Untitled</title>
<meta http-equiv=“X-UA-Compatible” content=“IE=Edge”/>
<style type=“text/css”>
.main_div
{
width: 65%;
height: 200px;
overflow: auto;
margin: 0 auto;
}
.table_grid
{
border: none;
border-collapse:collapse;
}
.th_grid
{
position: relative;
top: expression(offsetParent.scrollTop);
}
</style>
</head>
<body>
<div class=“main_div”>
<table class=“table_grid” border=“1” cellspacing=“2” cellpadding=“0” width=“100%”>
<tr class=“th_grid”>
<th>HEADER 1</th>
<th>HEADER 2</th>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
</table>
</div>
</body>
</html>
OK, I still don’t feel you’ve really spelled out what you are trying to achieve here, and/or what is not working for you.
I don’t believe fixed table headings can be achieved in every browser with the heading in the same table as the body.
I believe Paul’s example here is the type of effect you are after http://www.pmob.co.uk/temp/tablescroll.htm
I’ve done similiar in the past with javascript which moves the thead element outside of the table and makes the column widths equal to that of the body columns.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
table { width: 100% }
th { text-align: left }
.main_div {
width: 65%;
margin: 0 auto;
position: relative;
}
.body {
height: 200px;
overflow: auto;
}
.head {
}
</style>
</head>
<body>
<div class="main_div">
<table class="head">
<tr>
<th width="200">HEADER 1</th>
<th>HEADER 2</th>
</tr>
</table>
<div class="body">
<table>
<tr>
<td width="200">content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
</table>
</div>
</div>
</body>
</html>
But, I’ve seen stranger things than that achieved with CSS in the past. Maybe someone can come up with a nice solution with this HTML.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
table {
width: 100%
}
th {
text-align: left
}
thead {
}
tbody {
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th width="200">HEADER 1</th>
<th>HEADER 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
</tbody>
</table>
</body>
</html>
This type of thing works in FF, Opera, Safari, Chrome. Not sure if IE would play ball.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
.wrap { position: relative }
table {
width: 100%;
display: block;
height: 200px;
overflow: auto;
border: 1px solid #ccc;
border-collapse: collapse;
}
thead, tbody {
display: table;
width: 100%;
}
th {
text-align: left;
background: #fff;
}
thead {
position: absolute;
border-bottom: 1px solid #ccc;
}
tbody {
margin-top: 22px
}
tbody td {
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th width="200">HEADER 1</th>
<th>HEADER 2</th>
</tr>
</thead>
<tbody>
<tr>
<td width="200">first 1</td>
<td>first</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
<tr>
<td>content 1</td>
<td>content</td>
</tr>
<tr>
<td>content 2</td>
<td>content </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here’s another version I found that works well but requires you to fix the column widths in CSS which may work for you:
http://www.imaputz.com/cssStuff/bigFourVersion.html
Hi Mark,
Your first example is okay. It is just, if we use percentage in columns in the header then
the column width also of the body with the same percentage does not fit each others well.
Because in my case, i must turn on the border of the table.
If possible, i will do it in one div and a table only. Thanks for that example also.
The last example that you gave me does not work in IE.
Thank you for the effort mark.
Really appreciate it. Thanks.
Im just hoping that it is possible get it with a single div and a table.
Regards,
Jeff