用DIV轻松实现自适应Table

最新推荐文章于 2023-06-11 14:59:33 发布

chezaotu5026

最新推荐文章于 2023-06-11 14:59:33 发布

阅读量632

点赞数

原文链接：https://my.oschina.net/fengxh/blog/530089

版权

本文详细介绍了一种使用CSS进行表格布局的技巧，通过将div元素设置为display:table, display:table-caption, display:table-row及display:table-cell，可以创建出类似传统HTML表格的样式效果。这种布局方式在保持网页响应式的同时，提供了更多的灵活性和控制力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
<div style="display:table;border:1px red solid;width:100%;">
<div style="display:table-caption;text-align:center;">My table</div>
<div style="display:table-row;">
<div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">1</div>
<div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">2</div>
<div style="display:table-cell;border-bottom:1px red solid;border-right:0px red solid;">3</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">1</div>
<div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">2</div>
<div style="display:table-cell;border-bottom:1px red solid;border-right:0px red solid;">3</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">1</div>
<div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">2</div>
<div style="display:table-cell;border-bottom:1px red solid;border-right:0px red solid;">3</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;border-bottom:0px red solid;border-right:1px red solid;">1</div>
<div style="display:table-cell;border-bottom:0px red solid;border-right:1px red solid;">2</div>
<div style="display:table-cell;border-bottom:0px red solid;border-right:0px red solid;">3</div>
</div>
</div>
</body>

</html>