CSS表样样式 [英] CSS table-like style

问题描述

我想在我的页面中创建以下表格样的元素：

I want to create the following table-like element in my page:

我以前用< table> ...< table> 标签来做，将所有我的网站切换到CSS，我使用DIV等。
我想知道什么是最好的方式来实现这种类型的元素（仍然是< table> 标签？
我不想在< BR /> 的同一列中创建只有3列和单独的项，因为我想控制之间的间距

I used to do it using <table>...<table> tags , but now I am switching all my sites to CSS and I'm using DIVs and such. I would like to know what is the "best" way to achieve this kind of an element (is it still the <table> tag?). I don't want to create just 3 columns and separate Items in the same column with <BR /> since I would like to control the spacing between elements in the same column (such as between Item1 and Item4).

谢谢！

Joel

推荐答案

使用 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>

a href =http://jsbin.com/awagu4 =nofollow> http://jsbin.com/awagu4

Live example http://jsbin.com/awagu4

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

...but I suggest you to use table html tag if you need a table. For this reason exist, and then you can modify it with css. In any case both solutions have the same result.

这篇关于CSS表样样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！