首页双表头的动态表格html

双表头的动态表格html

时间: 2023-08-17 13:04:32 浏览: 46

你可以使用HTML和CSS来创建一个带有双表头的动态表格。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; } .sticky { position: sticky; top: 0; z-index: 1; background-color: #f2f2f2; } </style> </head> <body> <table> <tr> <th rowspan="2" class="sticky">表头1</th> <th colspan="3" class="sticky">表头2</th> </tr> <tr> <th>子表头1</th> <th>子表头2</th> <th>子表头3</th> </tr> <tr> <td class="sticky">数据1</td> <td>数据2</td> <td>数据3</td> <td>数据4</td> </tr> <tr> <td class="sticky">数据5</td> <td>数据6</td> <td>数据7</td> <td>数据8</td> </tr> </table> </body> </html> ``` 在这个示例中，我们使用`rowspan`属性将第一个表头单元格合并为两行，使用`colspan`属性将第二个表头单元格合并为三列。通过为表头添加`sticky`类，我们可以使其在滚动时保持固定。你可以根据自己的需求修改这个示例，并使用其他样式来美化表格。希望对你有帮助！如果你还有其他问题，请继续提问。