我想在我的 html 动态表格中垂直添加一个滚动条。我已将我的表放在一个 div 中，但它似乎不起作用。请帮忙
这是我的html代码
<thead>
<tr>
<td colspan="5">
<div class="scrollit">
<th><span>ID</span></th>
<th><span>Name</span></th>
<th><span>Location</span></th>
<th><span>Date</span></th>
<th><span>Catagory</span></th>
</div>
</td>
</tr>
</thead>
php代码
print "<tr>";
print "<td>";
print "<div>";
print "<td >" . $row['ID'] . "</td>";
print "<td >" . $row['Name'] . "</td>";
print "<td >" . $row['Location'] . "</td>";
print "<th >" . $row['Date'] . "</th>";
print "<td >" . $row['Category'] . "</td>";
print "</div>";
print "</td>";
print "</tr>";
}
print "</table>";
CSS 代码:
.scrollit {
overflow:scroll;
height:100px;
}
顺便说一句，我从数据库中检索数据到表中。
最佳答案
您的 HTML 代码中有一些语法错误，请检查下面更新的代码段
.scrollit {
width:100%;
overflow:scroll;
height:300px;
display: block;
}<div class="scrollit">
<table width="100%">
<thead>
<tr>
<th><span>ID</span></th>
<th><span>Name</span></th>
<th><span>Location</span></th>
<th><span>Date</span></th>
<th><span>Catagory</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
</tbody>
</table>
</div>关于php - 向表格垂直添加滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44017149/