css合并单元格

百科大全

更新时间：2025-10-05 08:03:4745

admin管理员组
文章数量:1794759

css合并单元格

在项目中遇到单元各下要独占一行显示的时候,可以尝试一下合并单元格。

一.html的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { width: 300px; margin: 100px auto; border: 1px solid #ccc; /* 合并单元格的线条 */ border-collapse: collapse; } th { border: 1px solid pink; } td { border: 1px solid blue; } </style> </head> <body> <table> <thead cellspacing="0"> <tr> <th>名称</th> <th>价格</th> <th>数量</th> <th>库存</th> </tr> </thead> <tbody> <tr> <td>小米</td> <td>1999</td> <td>1000</td> <td>500</td> </tr> </tbody> <tfoot> <tr> <td>华为</td> <td>2000</td> <td>1000</td> <td>300</td> </tr> </tfoot> </table> </body> </html>

二.view视图

三.需求

代码：增加了一行

现在的需求是需要oppo独占一行并且居中，这个时候就会用到单元格的合并了

注意:别忘记删除后面的td单元格,因为合并了之后会占有合并的单元格。

view视图

四.合并列

这里用到的元素是rowspan，原理和合并行是一样的。

代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { width: 300px; margin: 100px auto; border: 1px solid #ccc; /* 合并单元格的线条 */ border-collapse: collapse; } th { border: 1px solid pink; } td { border: 1px solid blue; } </style> </head> <body> <table> <thead cellspacing="0"> <tr> <th>名称</th> <th>价格</th> <th>数量</th> <th>库存</th> </tr> </thead> <tbody> <tr> <td rowspan="2">小米</td> <td>1999</td> <td>1000</td> <td>500</td> </tr> <tr> <td colspan="4" style="text-align: center;">oppo</td> </tr> </tbody> <tfoot> <tr> <td>华为</td> <td>2000</td> <td>1000</td> <td>300</td> </tr> </tfoot> </table> </body> </html>

view

这就是合并单元格的一些简单的流程。

本文标签：单元格 css

版权声明：本文标题：css合并单元格内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686973836a124234.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。