CSS 表格样式

Question

我想在我的页面中创建以下类似表格的元素:

我曾经使用 <table>...<table> 来做到这一点tags ，但现在我正在将我所有的网站切换到 CSS 并且我正在使用 DIV 等。我想知道实现这种元素的“最佳”方法是什么(它仍然是 <table> 标签吗？)。我不想只创建 3 列并在同一列中使用 <BR /> 分隔元素因为我想控制同一列中元素之间的间距(例如 Item1 和 Item4 之间)。

谢谢!!

乔尔

Answer 1

使用display:table, display:table-row, display:table-cell

#table {display:table;}
.row {display:table-row; }
.cell{display:table-cell;}

<div id="table">
  <div class="row">
    <div class="cell">Item 1</div>
    <div class="cell">Item 2</div>
    <div class="cell">Item 3</div>
  </div>
  <div class="row">
    <div class="cell">Item 4</div>
    <div class="cell">Item 5</div>
    <div class="cell">Item 6</div>
  </div>
  <div class="row">
    <div class="cell">Item 7</div>
    <div class="cell">Item 8</div>
    <div class="cell">Item 9</div>
  </div>
</div>

实例 http://jsbin.com/awagu4

...但如果您需要表格，我建议您使用 table html 标记。这个原因存在，然后你可以用css修改它。在任何情况下，两种解决方案都具有相同的结果。