我希望在Firefox 3.6中使用固定标头,但在Firefox 13中则不行。
css也被喂食了,我觉得必须要对ID scrollTableContainer
做些什么。
表格
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="odd gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
</tbody>
</table>
</div>
**CSS BELOW**
div.scrollTableContainer
{
height: 485px;
overflow: auto;
width: auto;
margin: 10px -75px 1px -50px;
position: relative;
}
/* The different widths below are due to the way the scroll bar is implimented */
/* All browsers (but especially IE) */
div.scrollTableContainer table
{
width: 1000px;
}
/* Modern browsers (but especially firefox ) */
html>/**/body div.scrollTableContainer table
{
width: 1000px;
}
/* Modern browsers (but especially firefox ) */
html>/**/body div.scrollTableContainer table>tbody
{
overflow: auto;
height: 365px;
overflow-x: hidden;
max-width:100px;
}
div.scrollTableContainer thead tr {
position:relative;
background-color:#3366FF;
width:auto;
text-align:left;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
/* fixes the header being over too far in IE, doesn’t seem to affect FF */
left: 0px;
}
/*prevent Mozilla scrollbar from hiding cell content*/
div.scrollTableContainer td:last-child {padding-right: 20px;}
/*********************************************************************************/
/* Used specifically for View Announcements page in Samo */
div.scrollTableContainerAnn
{
height:485px;
overflow: auto;
width: auto;
margin: 10px -225px 1px -50px;
position: relative;
}
/* The different widths below are due to the way the scroll bar is implemented */
/* All browsers (but especially IE) */
div.scrollTableContainerAnn table
{
width: 1000px;
}
/* Modern browsers (but especially firefox ) */
html>/**/body div.scrollTableContainerAnn table
{
width: 1000px;
}
/* Modern browsers (but especially firefox ) */
html>/**/body div.scrollTableContainerAnn table>tbody
{
overflow: auto;
height: 365px;
overflow-x: hidden;
max-width:100px;
}
div.scrollTableContainerAnn thead tr
{
position:relative;
background-color:#3366FF;
width:auto;
text-align:left;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
/* fixes the header being over too far in IE, doesn't seem to affect FF */
left: 0px;
}
/*prevent Mozilla scrollbar from hiding cell content*/
div.scrollTableContainerAnn td:last-child
{
padding-right: 20px;
}
/*********************************************************************************/
/* CSS Document */
div.scrollTableContainerB {
height: 500px;
overflow: auto;
width: auto;
margin: 10px -75px 1px -75px;
position: relative;
}
/* The different widths below are due to the way the scroll bar is implimented */
/* All browsers (but especially IE) */
div.scrollTableContainerB table {
width: 1110px;
}
/* Modern browsers (but especially firefox ) */
html>/**/body div.scrollTableContainerB table {
width: 900px;
}
/* Modern browsers (but especially firefox ) */
html>/**/body div.scrollTableContainerB table>tbody {
overflow: auto;
height: 365px;
overflow-x: hidden;
max-width:100px;
}
div.scrollTableContainerB thead tr {
position:relative;
background-color:#3366FF;
width:800px;
text-align:left;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
/* fixes the header being over too far in IE, doesn’t seem to affect FF */
left: 0px;
}
/*prevent Mozilla scrollbar from hiding cell content*/
div.scrollTableContainerB td:last-child {padding-right: 20px;}