阅读量:0
``
html，，，，，，Table布局示例，， table {， width: 100%;， border-collapse: collapse;， }， th, td {， border: 1px solid black;， padding: 8px;， text-align: left;， }，，，，，，表头1，表头2，表头3，，，数据1，数据2，数据3，，，数据4，数据5，数据6，，，，，`` <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Div+CSS Table布局示例</title> <style> /* 全局样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /* 表格容器样式 */ .table-container { display: table; width: 100%; border-collapse: collapse; } /* 单元格样式 */ .table-cell { display: table-cell; padding: 10px; border: 1px solid #ccc; } /* 标题样式 */ h2 { text-align: center; margin-bottom: 20px; } /* 单元表格样式 */ .unit-table { width: 50%; margin: auto; border-collapse: collapse; } .unit-table th, .unit-table td { border: 1px solid #ccc; padding: 10px; text-align: center; } /* 问题与解答栏目样式 */ .qa-section { width: 80%; margin: 40px auto; } .qa-question { font-weight: bold; margin-bottom: 10px; } </style> </head> <body> <!-主表格 --> <div class="table-container"> <div class="table-cell"> <h2>标题1</h2> <!-单元表格 --> <table class="unit-table"> <tr> <th>列1</th> <th>列2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> <tr> <td>数据3</td> <td>数据4</td> </tr> </table> </div> <div class="table-cell"> <h2>标题2</h2> <!-单元表格 --> <table class="unit-table"> <tr> <th>列1</th> <th>列2</th> </tr> <tr> <td>数据5</td> <td>数据6</td> </tr> <tr> <td>数据7</td> <td>数据8</td> </tr> </table> </div> </div> <!-问题与解答栏目 --> <div class="qa-section"> <div class="qa-question">问题1：如何使用Div+CSS实现表格布局？</div> <div class="qa-answer">答案1：通过使用display属性设置为table和table-cell，可以创建类似表格的布局，可以使用border属性设置边框样式。</div> <div class="qa-question">问题2：如何使单元格内的内容居中？</div> <div class="qa-answer">答案2：可以通过为单元格添加text-align属性并设置为center来实现内容居中。</div> </div> </body> </html>以上内容就是解答有关“div+css table布局实现代码”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。
