首页编写一个弹出DIV，带滚动条，DIV里带table

编写一个弹出DIV，带滚动条，DIV里带table

时间: 2024-04-12 21:34:15 浏览: 80

当然可以！以下是一个示例的 HTML 代码，可以创建一个带有滚动条的弹出 DIV，并在其中嵌入一个带有表格的内容： ```html <!DOCTYPE html> <html> <head> <style> .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 300px; background-color: #FFFFFF; border: 1px solid #000000; overflow-y: scroll; } table { width: 100%; } th, td { padding: 8px; text-align: left; } th { background-color: #F4F4F4; } </style> </head> <body> <button onclick="togglePopup()">打开弹出 DIV</button> <div id="myPopup" class="popup"> <table> <thead> <tr> <th>标题1</th> <th>标题2</th> <th>标题3</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr> <tr> <td>数据4</td> <td>数据5</td> <td>数据6</td> </tr>  </tbody> </table> </div> <script> function togglePopup() { var popup = document.getElementById("myPopup"); popup.style.display = (popup.style.display === "block") ? "none" : "block"; } </script> </body> </html> ``` 以上代码中，我们使用了一个按钮来控制弹出 DIV 的显示和隐藏。DIV 的样式通过 CSS 中的 `.popup` 类来定义。DIV 内部嵌入了一个带有表格的内容，表格的样式通过 CSS 中的 `table`、`th`、`td` 类来定义。DIV 使用 `overflow-y: scroll;` 属性来实现垂直滚动条。你可以将以上代码保存为一个 HTML 文件，然后在浏览器中打开该文件，点击按钮即可看到带有滚动条的弹出 DIV，并且其中包含一个表格。你可以根据需要修改 DIV 的样式、表格的内容和样式来满足你的需求。希望对你有所帮助！

阅读全文