在IE 9上出现滚动tbody的问题（tbody的高度=高度-线）

Question

对不起我的英文不太好，希望你能理解我想表达的意思...

我正在尝试实现一个支持表格主体独立滚动的HTML表格。

我找到了以下问题，这些问题对我很有帮助： 如何使表格的“tbody”独立于“thead”滚动？

我测试了以下代码，在Chrome（22），Firefox（16）和Opera（12）上都没有问题：

HTML：

<table>
  <thead>
   <tr>
    <th>Title1</th>
    <th>Title2</th>
    <!-- ... -->
   </tr>
  </thead>
  <tbody>
   <tr>
     <td>...</td>
     <td>...</td>
     <!-- ... -->
   </tr>
   <!-- ... -->
  </tbody>
</table>

CSS :

thead, tbody {
    display: block;
}

tbody {
    height:500px;
    overflow-y:auto;
    overflow-x:hidden;
}

thead {
    line-height: 20px;
}

除了IE 9之外，它可以在主要的浏览器上运行，在IE上，我有一些问题：

• tbody的高度未定义（因此我没有任何滚动条）
• 每个tr的高度为500px（其他浏览器上的tbody的高度）

以下两个示例完全具有相同的问题：http://jsfiddle.net/nyCKE/2/，http://www.imaputz.com/cssStuff/bigFourVersion.html

我看到了下面的问题（和答案），但这对我没有帮助：IE9 + css：固定表头的问题

所以我确定这个错误来自IE，但我不知道如何在不更改我的HTML结构的情况下修复它。

有人有什么想法吗？

- Dorian

Answer 1

我稍微尝试修复了它，希望能给你一些想法。

HTML

<div class="wrap">
    <div class="inner">
        <table>
            <thead><tr>
                <th><p>Problem</p></th>
                <th><p>Solution</p></th>
        </tr>               
            </thead>            
            <tbody>              
            </tbody>
        </table>
    </div>
</div>​

CSS

p {margin:0 0 1em}
table p {margin :0}
.wrap {
    margin:50px 0 0 2%;
    float:left;
    position:relative;
    height:200px;
    overflow:hidden;
    padding:25px 0 0;
    border:1px solid #000;
width:150px
}
.inner {
    padding:0 ; 
    height:200px;
    overflow:auto;
}    
table {  margin:0 0 0 -1px; border-collapse:collapse; width:130px}
td {
    padding:5px;
    border:1px solid #000;
    text-align:center;    
}
thead th {
    font-weight:bold;
    text-align:center;
    border:1px solid #000;
    padding:0 ;    
    color:#000;
}
thead th {border:none;}
thead tr p {  position:absolute;   top:0;    }
.last { padding-right:15px!important; }​

Demo http://jsfiddle.net/nyCKE/272/

- Sowmya

---

谢谢！它可以工作，只有一个问题。使用该解决方案时，只有在滚动时才能看到<th>上的<p>。但是我也必须看到我的<th>样式（因为我使用了tableSorter插件），所以我直接在我的<th>上设置了absolute值，并使用jQuery函数设置了我的left CSS属性。这不是完美的（因为它使用Javascript，我认为它没有border-collapse:collapse就无法工作），但它在IE上可以工作，希望这个错误很快就会被修复。 - Dorian

Answer 2

这里有一个更简短的答案，允许您在ie9中滚动带有固定标题的表格。

在表格周围添加一个条件性div

<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->
<table>
...
<!--[if lte IE 9]>
</div>
<!--<![endif]-->

为ie9添加以下样式

    .old_ie_wrapper {
        height: 500px;
        overflow: auto;
    }

        .old_ie_wrapper tbody {
            height: auto;
        }

        .old_ie_wrapper thead tr {
            position: absolute;
        }

        .old_ie_wrapper tbody tr:first-child {
            height: 67px;
            vertical-align: bottom;
        }

您需要根据您的表格调整高度和可能的其他属性。

- ykay says Reinstate Monica