div自适应表格
发布时间：2018年4月13日 作者：未知 查看次数：1268
代码:（保存为utf-8） <html> <head> <title>div表格</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> .divTbMain { display:table; border:1px red solid; width:100%; } .divTbHead { display:table-caption; text-align:center; } .divTbBody { display:table-row; } .divTbItem1 { display:table-cell; width:20%; border-bottom:1px red solid; border-right:1px red solid; } .divTbItem2 { display:table-cell; width:50%; border-bottom:1px red solid; border-right:1px red solid; } .divTbItem3 { display:table-cell; width:30%; border-bottom:1px red solid; border-right:1px red solid; } </style> </head> <body> <div class="divTbMain"> <div class="divTbHead">My table</div> <div class="divTbBody"> <div class="divTbItem1">1</div> <div class="divTbItem2">2</div> <div class="divTbItem3">3</div> </div> <div class="divTbBody"> <div class="divTbItem1">1</div> <div class="divTbItem2">2表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格表格</div> <div class="divTbItem3">3</div> </div> <div class="divTbBody"> <div class="divTbItem1">1</div> <div class="divTbItem2">2</div> <div class="divTbItem3">3</div> </div> </div> </body> </html> |
||||||
|
||||||
