This quiz is exactly the fix I was hoping to find. I’ve been wanting to make some minor modifications to it and can’t figure out how to do them. Are any or all of these possible? If so, how?
Add a bottom border to the frozen th line?
Add borders to the th’s within frozen th?
Center the text within the th paragraphs?
I removed the border:none from thead th and replaced it with a border but it doesn’t show. I thought maybe giving the thead tr p a background or background-color of transparent would do it but that hasn’t made the borders appear either. Help?
You should be able to add borders although they might vary between browsers but you’d need to apply them to the p element. You should also be able to ibncrease the height of the header although it has to be done manually.
e.g.
<!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:#fffccc;
border:1px solid #000;
}
.inner {
width:100%;
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:#ffffcc;
}
thead th {
border:none;
}
thead tr p {
position:absolute;
top:0;
width:100%;
border-bottom:1px solid #000;
border-left:2px solid #000;
height:46px;
margin-left:-6px;
padding:0 3px 3px;
}
.last {
padding-right:15px!important;
}
</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<br>(test)</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<br>test2</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 class="last"><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 class="last"><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 class="last">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 class="last">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 class="last">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 class="last">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 class="last">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 class="last">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 class="last">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 class="last">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 class="last">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 class="last">4</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
I don’t think the header can be centred because it is absolutely placed into position - (although that doesnt mean its impossible but that I just haven’t found a way to do it yet).
Have the table columns shrink-wrap the text and yet keep the vertical scroll-bar right next to the table like it is in the original
Thanks. That gets most of what I was wanting. Here’s an example of what I meant by getting the columns to shrink-wrap the text and yet keep the vertical scroll-bar right next to the table. Here’s a link to a sample table. I’ve hard-coded in some data but it will eventually be populated dynamically:
At “medium” kinds of resolutions, it looks fine, but at higher res, the columns widen so much that it makes the data a little hard to read (this screenshot was taken at 1440x900):
I tried removing the width from the table and the inner wrap, but I got the link below - which obviously isn’t good for a couple of reasons - one being the scroll bar doesn’t hug the table (which also adds the blue background which is distracting) and the second being the one th p text that extends to far. I could deal with that one th by just changing the text - or maybe giving all table cells a bit more padding. But I don’t know if there’s a way to have the table shrink-wrap and still get the scroll bar to hug the table’s right side. Here’s the screenshot with the widths removed:
