使DIV的行为像一个表使用CSS

前端之家收集整理的这篇文章主要介绍了使DIV的行为像一个表使用CSS前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好吧,在设计网站时,我遇到了一个想法…我有一些部分我的网站,将更适合作为一个表,但不是表格数据。由于某种原因,它真的错误我使用表的东西,不是一个表。所以我注意到CSS的显示选项,但我不能让它工作正常。这是我想要的。问题是什么?
<div class="table">
  <div class="tr">
    <div class="td">Row 1,Cell 1</div>
    <div class="td">Row 1,Cell 2</div>
    <div class="td">Row 1,Cell 3</div>
  </div>
  <div class="tr">
    <div class="td">Row 2,Cell 1</div>
    <div class="td">Row 2,Cell 2</div>
    <div class="td">Row 2,Cell 3</div>
  </div>
</div>

这是CSS的样子。

div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; }
div.td {border: 1px solid black; display: table-cell; }

我希望页面看起来像一个表被使用,但“细胞”都在一个新的一行。有什么想法吗?

解决方法

奇怪:你的报价看起来不错,应该工作。你确定没有重叠的显示:块!重要的地方?

但是,我的意思是,我要说,为了上帝的爱,只要使用一张桌子。

猜你在找的CSS相关文章