Html 如何在Chrome和IE上使用position sticky works制作div？

我有一个全局div，两个div，一个显示标题，另一个显示正文。滚动已启用，但我想在垂直滚动时固定标题

我使用的位置是：sticky，它只适用于firefox

有人能帮我吗

CSS:

HTML:

<div class="wrapper"> 
<div class="headertable" id="headerfixed">
    <table> 
        <tr><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td></tr>
    </table>
</div>
<div class="bodytable"> 
    <table> 
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
    </table>
</div>

人头
测试测试
测试测试
测试测试
测试测试
测试测试
测试测试
测试测试
测试测试
测试测试
测试测试
测试测试
测试测试

---

JSFIDLE示例：

仅使用

html

和

css

这比最初预期的要困难，但这里有一种解决方案：使用

clip

，但这更像是一种变通方法（chrome似乎取消了对

粘性
：谷歌（chrome）的支持）取消了对位置的支持：由于规范的未完成性质，因此具有粘性，同时他们将关注其他滚动功能。问题的可能重复之处不在于表格，而在于头部，头部必须固定，并按照与主体相同的规则滚动。仅使用
html
还有
css
但这里有一种解决方案：使用
clip
但这更像是一种解决方法！：（chrome似乎取消了对
sticky
的支持：Google（chrome）删除了对位置的支持：由于规范的未完成性质，因此具有粘性，同时他们将关注其他滚动功能。问题的可能重复之处不在于桌子，而在于头部，头部必须固定，并按照与主体相同的规则滚动。
<div class="wrapper"> 
<div class="headertable" id="headerfixed">
    <table> 
        <tr><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td></tr>
    </table>
</div>
<div class="bodytable"> 
    <table> 
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
        <tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
    </table>
</div>