Css 表标题已修复

我在这里读了很多问题来回答我的问题，但是我发现没有一个代码在我当前的工作平台上有效

我需要固定的表格标题和一个滚动到表格主体

表格编号：

            <table id="mtable">

            <tr class="tamanhos">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                {{each sizes}}
                ${endMark($data, sizes, ',')}
                <td style="text-align:left;">${$value.tam}</td>
                {{/each}}
            </tr>


            <div class="tbody">
            {{each colours}}
            <tr>
                ${endMark($data, colours, ',')}
                <td>${$value.cor} <input type="hidden" id="cor" name="corEscolhida[]" value="${$value.cor}" /></td>
                <td><span style="text-transform:none;">${$value.webtext}</span></td>
                {{each sizes}}
                <td class="bloco" style="text-align:left;">
                <input type="hidden" id="tam" name="tamEscolhido[]" value="${$value.tam}" />
                <input class="inserirQtd" style="max-width:30px;height:9px;font-size:11px;" id="quatd" name="quantidadeEscolhida[]" autocomplete="off" type="text" placeholder=""></input>
                <span width="40px" class="stockValor" name="stockValor"></span>
                <br><span class="stockValor2" style="font-size:10px;text-transform:none;" name="stockValor2"></span>
                </td>       
                {{/each}}
            </tr>
            {{/each}}


            <tr>
                <td colspan="100"><span id="webextra" style="float:left;text-transform:none;">${webextra}</span></td>
            </tr>
            </div>
        </table>

#mtable {
    border-collapse:none;
    border-spacing:none;
    margin:none;
}


#mtable>.tamanhos {
    display:block;
    height:25px;
}

#mtable>.tbody {
    height: 200px;
    overflow-y: scroll;
}

---

没有什么是谷歌不能解决的。这是一个纯CSS版本，归功于乔纳斯·舒伯特：

---

这不管用。它使我的桌子都“未配对”。我甚至在谷歌的第2页上查看了我的搜索结果……好吧，正如你从它的工作原理中所看到的，你需要以它为例，将它整合到你现在拥有的东西中，并删除任何冲突的东西。。或者稍作修改以适应您想要的风格。

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}