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

Question

在对固定表头进行深入调查后，我偶然发现了一种相当不错的方法来做到这一点。但是，我必须使其完全跨浏览器兼容。

我四处寻找另一种方法来做这件事，但我被难住了。

据我测试，下面的代码在 FF 中有效(未对齐的链接不是一个大问题，但同时也很烦人)

但是，在 IE 中，标题之间存在空白，我无法在保持样式的同时将其删除。这应该可以追溯到 IE6，但我们大多数人都在 IE8及以上，到处都有同样的问题。

滚动效果很好，所以粘贴的表格只是我必须使用的示例，因为数据很长。 16px margin-right 是为了补偿出现的滚动条。

任何想法将不胜感激。

样式(很抱歉压缩了它)

<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

这个怎么样-----> JSBin demo

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

已更新 JSBin ------> 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;  
}