CSS 表格样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4105338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS table-like style
提问by Joel
I want to create the following table-like element in my page:
我想在我的页面中创建以下类似表格的元素：
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).
我曾经使用<table>...<table>tags来做，但现在我将所有网站切换到 CSS 并且我正在使用 DIV 等。我想知道实现这种元素的“最佳”方法是什么（它仍然是<table>标签吗？）。我不想只创建 3 列并在同一列<BR />中将Items 分开，因为我想控制同一列中元素之间的间距（例如 Item1 和 Item4 之间）。
Thanks!!
谢谢！！
Joel
乔尔
回答by Sotiris
use display:table, display:table-row, display:table-cell
使用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>Live example http://jsbin.com/awagu4
...but I suggest you to use tablehtml 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.
...但table如果您需要表格，我建议您使用html 标签。因为这个原因存在，然后你可以用css修改它。在任何情况下，两种解决方案都具有相同的结果。
回答by cac
you can achive the same effect with using unordered list nested in a div element
您可以使用嵌套在 div 元素中的无序列表来达到相同的效果
<div class="wrapper">
<ul class="itemHolder">
<li><div>item1</div></li>
<li><div>item2</div></li>
<li><div>item3</div></li>
<li><div>item4</div></li>
<li><div>item5</div></li>
<li><div>item6</div></li>
<li><div>item7</div></li>
<li><div>item8</div></li>
<li><div>item9</div></li>
</ul>
</div>
this would be your css
这将是你的 css
.wrapper{
width:600px;
}
.itemHolder{
margin:0;
padding:0;
}
.itemHolder li{
float:left;
margin-bottom:10px;
}
.itemHolder li div{
width:200px;
}
you can see it live here
你可以在这里看到它
回答by Russell Dias
Using tables for creating your layoutis usually frowned upon. Using divs alongside CSS for tabulardata is also frowned upon. The best way - as asked by your question - is to use tables on this occasion.
使用表格来创建布局通常是不受欢迎的。将 div 与 CSS 一起用于表格数据也是不受欢迎的。最好的方法 - 正如你的问题所问的 - 是在这种情况下使用表格。
Unless of course the items represented in your image is not tabulated data, but containers/boxes which in turn will hold respective data. In which case I would probably recommend CSS.
当然，除非您的图像中表示的项目不是表格数据，而是容器/盒子，这些容器/盒子反过来将保存相应的数据。在这种情况下，我可能会推荐 CSS。
回答by Eldelshell
You can also achieve this with a flexbox.
您也可以使用 flexbox 来实现这一点。
.items {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
This will generate a responsive table like structure.
这将生成一个类似结构的响应表。
回答by dwjohnston
Flex box is suitable for this.
Flex 盒适用于此。
ul {
display: flex;
flex-flow: row wrap;
}
li {
flex-basis: 40%;
} <ul>
<li> item 1</li>
<li> item 2</li>
<li> item 3 </li>
<li> item 4 </li>
</ul> 回答by tutuDajuju
with list style set to none and some use of float you can make a similar result to tables. there's this link: http://mindrulers.blogspot.com/2008/03/create-table-using-css.htmland here is it in action: http://www.jsfiddle.net/pJgyu/3247/
将列表样式设置为 none 并使用 float 可以产生与表格类似的结果。有这个链接：http: //mindrulers.blogspot.com/2008/03/create-table-using-css.html这里是它在行动：http: //www.jsfiddle.net/pJgyu/3247/
回答by BerggreenDK
I personally prefer using a design-grid, when doing layouts.
在进行布局时，我个人更喜欢使用设计网格。
At the moment, I would recommend this "framework": http://960.gs/The name 960 is because its a design that has 960 pixels width, so that it is viewable on most computers which has minimum 1024 pixels in width. 960 is a great number for dividing into columns etc. but have a look at the website for further info.
目前，我会推荐这个“框架”：http: //960.gs/960 这个名字是因为它的设计有 960 像素的宽度，所以它可以在大多数宽度至少为 1024 像素的计算机上查看。960 是用于划分列等的一个很好的数字，但请查看网站以获取更多信息。
回答by Jon P
In addressing which method you should use:
在解决您应该使用哪种方法时：
If this is purely a layout issue and the items have no semantic relation issue I would use as your container, row and item elements. In which case use something like Sotiris' answer.
如果这纯粹是布局问题并且项目没有语义关系问题，我将用作您的容器、行和项目元素。在这种情况下，请使用类似Sotiris 的答案。
If your items are semantically related then look at who they are related. If they are semantically in groups, i.e. a table use a table, particularly if there would be a title for each column. If it is just generally a group of related items, use a list structure like cac's answer(thoguh it'd probably lose the inner divs).
如果您的项目在语义上相关，则查看它们与谁相关。如果它们在语义上是分组的，即一个表使用一个表，特别是如果每列都有一个标题。如果它通常只是一组相关项目，请使用像cac's answer这样的列表结构（虽然它可能会丢失内部 div）。
There are also some interesting variations on the list approach.
列表方法也有一些有趣的变化。
By removing the wrapper, or the width from the wrapper in Cac's answer you can create a layout that adjusts it self to different browser width, so for wider screens you'll get less rows of elements as you will get more elements in the row.
通过在 Cac 的答案中删除包装器或包装器的宽度，您可以创建一个布局，将其自身调整为不同的浏览器宽度，因此对于更宽的屏幕，您将获得更少的元素行，因为您将获得更多的元素行。
Also don't ignore the definition list, if that is a better semantic option to an unordered list.
也不要忽略定义列表，如果它是无序列表更好的语义选项。
