Question

经过对固定表格标题的高度调查后，我偶然发现了一个相当不错的方法。但是，我必须使其完全跨浏览器兼容。

我已经搜索了高低，换了另一种方式来做这件事，我现在陷入困境。

以下代码在我可以测试的FF中工作（未对齐的链接不是一个大问题，但同时也很烦人）

然而，在IE中，标题之间有空白区域，在保持样式的同时我似乎无法摆脱。这应该会回到IE6，但我们大多数人都在使用IE8并且到处都有同样的问题。

滚动工作正常，因此粘贴的表格只是我必须使用的一个示例，因为数据很长。 16px页边距是为了补偿显示的滚动条。

任何想法都将不胜感激。

造型（为压缩而道歉）

<style type="text/css">
* {
    padding:0;
    margin:0;
}
table {
    width:100%;
    color: #000;
    font-size: 0.9em;
    text-align:center;
    vertical-align:middle;
    vertical-align:center;
}
th {
    font-weight:bold;
    text-align:left;
}
.container {
    position:relative;
    padding:1.6em 0 0 0;
    width:80%;
    background:#fff;
    margin:0 auto;
}
.scroll {
    overflow:auto;
    overflow-x:hidden;
    height:19.6em;
}
.container thead tr {
    position:absolute;
    top:0;
    margin-right:16px;
    background:#fff;
}
.container th, .container td {
    width:100em;
}
td {
    background:#e5f1f4;
    border-bottom: 1px solid #ccc;
    padding: 1px 5px;
    text-align:center;
    vertical-align: middle;
    height:100%;
}
th {
    background:#328aa4;
    color:#fff;
    border-top: 3px double #ccc;
    border-bottom: 3px double #ccc;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    text-align:center;
}
tr.alt td {
    background-color: #f8fbfc;
}
tfoot {
    display:none;
}
table a:visited, table a:active, table a:link {
    text-decoration: none;
    color: black;
    display: block;
}
table a:hover {
    text-decoration: none;
    color: black;
    background-color: #B0E2FF;
    display: block;
}
div.headalign {
    text-align: left;
    font-style:italic;
}
</style>

网页代码

<div class="container">
<div class="scroll">

<table cellspacing="0" cellpadding="0" class="myTable">
    <thead>
        <tr>
            <th><p>Product Code</p></th>
            <th><p>Design Name</p></th>
            <th><p>Ricoh</p></th>
            <th><p>Nashuatec</p></th>
            <th><p>Rex Rotary</p></th>
            <th><p>Gestetner</p></th>
            <th><p>Infotec</p></th>
            <th><p>Lanier</p></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th><p>Product Code</p></th>
            <th><p>Design Name</p></th>
            <th><p>Ricoh</p></th>
            <th><p>Nashuatec</p></th>
            <th><p>Rex Rotary</p></th>
            <th><p>Gestetner</p></th>
            <th><p>Infotec</p></th>
            <th><p>Lanier</p></th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td colspan="8"><div class="headalign"><a href="../contents/af1022_1027.htm"> 1022/1027/1032, 2022/2027/2032 series</a></div></td>
        </tr>
        <tr>
            <td><a href="../contents/af1022_1027.htm">B022</a></td>
        <td><a href="../contents/af1022_1027.htm">Russian C2a</a></td>
        <td><a href="../contents/af1022_1027.htm"> 1022</a></td>
        <td><a href="../contents/af1022_1027.htm">2205</a></td>
        <td><a href="../contents/af1022_1027.htm">2238</a></td>
        <td><a href="../contents/af1022_1027.htm">2212</a></td>
        <td><a href="../contents/af1022_1027.htm">IS 2022</a></td>
        <td><a href="../contents/af1022_1027.htm">5622</a></td>
    </tr>
    <tr>
        <td><a href="../contents/af1022_1027.htm">B027</a></td>
        <td><a href="../contents/af1022_1027.htm">Russian C2b</a></td>
        <td><a href="../contents/af1022_1027.htm"> 1027</a></td>
        <td><a href="../contents/af1022_1027.htm">2705</a></td>
        <td><a href="../contents/af1022_1027.htm">2738</a></td>
        <td><a href="../contents/af1022_1027.htm">2712</a></td>
        <td><a href="../contents/af1022_1027.htm">IS 2027</a></td>
        <td><a href="../contents/af1022_1027.htm">5627</a></td>
    </tr>
</tbody>
</table>
</div>
</div>

Answer 1

这个怎么样-----＆gt; JSBin demo

我所做的就是从标题行中删除绝对定位，并删除#container div上的1.6em顶部填充。您基本上在顶部添加了1.6个空间，然后移动桌子以覆盖该空间。除非有一些无法解释的原因，否则就没有意义了。

更新了JSBin -------＆gt; HERE

.container thead tr {
    position:absolute;
    top:0;
    width: 100%; /* <---- this line added and right: 300; was removed ---- */
margin-right:16px;
background:#fff;
}

和

th {
background:#328aa4;
color:#fff;
    padding: 2px 0; /* <---- This Line added to compensate for white space below header row.----- */
border-top: 3px double #ccc;
border-bottom: 3px double #ccc;
/*  padding: 1px 5px;*/
font-variant: small-caps;
letter-spacing: 0.1em;
/*  padding-left:10px;
padding-right:10px;*/
text-align:center;  
}

在IE中修复了带有CSS样式问题的标题表

1 个答案: