首页table表格滚动展示

table表格滚动展示

时间: 2023-08-23 11:05:14 浏览: 36

您可以使用HTML和CSS来创建一个可以滚动展示的表格。下面是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <style> /* 设置表格容器的高度和宽度 */ .table-container { height: 200px; width: 300px; overflow: auto; } /* 设置表格的样式 */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; } </style> </head> <body> <div class="table-container"> <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>25</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>30</td> <td>上海</td> </tr>  </tbody> </table> </div> </body> </html> ``` 在上面的示例中，我们使用了一个具有固定高度和宽度的 `<div>` 元素作为表格容器，并将其 `overflow` 属性设置为 `auto`，以便在内容超出容器尺寸时出现滚动条。表格的样式定义在 CSS 中，使用了 `border-collapse` 属性来合并单元格边框，以及一些基本的背景和边框样式。您可以根据需要修改表格容器的尺寸、表格的样式以及表格内容来满足您的实际需求。希望这可以帮助到您！