Question

我有一个动态添加到我的网页的表格。

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 5px;
    text-align: center;
}

table#appraiserTable th {
    background-color: black;
    color: white;
}

我想让它可以滚动并修复标题。

我可以通过在CSS中添加此代码来使整个表可滚动 -

tbody {
    display:block;
    overflow-y:scroll; 
    height:100px;    
}

但这会使整个表格可滚动;标题不会保持固定。此外，桌子有边框，我怎么能摆脱它？

Answer 1

在这里你jsfiddle

<body>
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
</table>
<div class="tb">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>01</td>
<td>$100</td>
</tr>
<tr>
<td>02</td>
<td>$80</td>
</tr>
<tr>
<td>03</td>
<td>$100</td>
</tr>
<tr>
<td>04</td>
<td>$80</td>
</tr>
<tr>
<td>05</td>
<td>$100</td>
</tr>
<tr>
<td>06</td>
<td>$80</td>
</tr>
</tbody>
</table>
</div>
</body>

CSS

table, th, td {
    border-collapse: collapse;
}

th, td {
    padding: 5px;
    text-align: center;
}

table#appraiserTable th {
    background-color: black;
    color: white;
}    
.tb {
    height: 100px !important;
    overflow: auto;
}

如何使用固定标题使表格可滚动？

1 个答案: