div写自适应表格

最新推荐文章于 2024-03-14 17:18:07 发布

转载最新推荐文章于 2024-03-14 17:18:07 发布 · 4.5k 阅读

本文通过一个具体的HTML实例展示了如何使用纯HTML来创建一个带有边框的表格，包括表格标题和多行内容，详细介绍了各部分的样式设置。

<html>
<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>