Yos*_*ahu 27 html css css-tables
好吧,在设计一个网站时,我遇到了一个想法...我的网站的一些部分更适合作为表格,但不是表格数据.出于某种原因,我真的很烦我使用表格来表示不是桌子的东西.所以我注意到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; }
我希望页面看起来像一张桌子,但'细胞'都是新的.有什么想法吗？
Pek*_*ica 21
奇怪:你引用的内容看起来很好,应该有用.你确定display: block !important某处没有压倒一切吗？
但正如我的观点,我会说,为了上帝的爱,只需使用一张桌子.:)
认真.在这种情况下不使用表的主要论点是它们在语义上不是正确的元素.但看该div汤,你不得不承认一个<table>更优选结构的方式,即使它不正是你显示表格数据.
Pas*_*nes 10
我知道这是一个很老的帖子,但是由于没有人真的用DIV解决你的问题我以为我会试一试.
您的问题很简单...您的单元格元素是div,因此显示:block,使用跨度代替表格单元格(或添加display:inline to .cell CSS).
<div class="table">
<div class="tr">
<span class="td">Row 1, Cell 1</span>
<span class="td">Row 1, Cell 2</span>
<span class="td">Row 1, Cell 3</span>
</div>
<div class="tr">
<span class="td">Row 2, Cell 1</span>
<span class="td">Row 2, Cell 2</span>
<span class="td">Row 2, Cell 3</span>
</div>
</div>
<body>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">Row 1, Cell 1</div>
<div style="display: table-cell;">Row 1, Cell 1</div>
<div style="display: table-cell;">Row 1, Cell 1</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">Row 2, Cell 1</div>
<div style="display: table-cell;">Row 2, Cell 1</div>
<div style="display: table-cell;">Row 2, Cell 1</div>
</div>
</div>
</body>