Question

我在回答我的问题时已经阅读了很多问题，但是我找到的代码都没有在当前平台上发挥作用。

我需要修复表格标题并滚动到表格主体。

表格代码：

            <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>

表格的CSS：

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


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

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

Answer 1

Google无法解决这个问题。这是一个纯粹的CSS版本，归功于Jonas Schubert：

https://jsfiddle.net/dPixie/byB9d/3/light/

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;
}

表头已修复

1 个答案: