在 HTML 中的两个不同表格之间放置一个空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35373313/
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
Putting a space between two different tables in HTML
提问by aquaelmo
I want about 30 tables on a page in a grid like format but I am having trouble putting any spacing between all of them. This is what I have right now:
我想在一个页面上以类似网格的格式放置大约 30 个表格，但我无法在所有表格之间放置任何间距。这就是我现在所拥有的：
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
table {
border-collapse: collapse;
border: 1px solid gray;
width: 50%;
float: left;
}
th {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: #6666ff;
}
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.prizestitle {
font-size: 30px;
}
.prizesinfo {
font-size: 25px;
}
.prizesdesc {
font-size: 18px;
}
Here is the jsfiddle: https://jsfiddle.net/ohLa00m7/1/
这是 jsfiddle：https://jsfiddle.net/ohLa00m7/1/
Something similar to how to boxes are layed out here (http://www.awwwards.com/blog/) is what I am looking for.
我正在寻找类似于如何布置盒子的东西（http://www.awwwards.com/blog/）。
Thanks for any help!
谢谢你的帮助！
采纳答案by Sakaratte
Using <div>instead of tables would work better.
使用<div>代替表会更好。
My version of this code:
我的这段代码的版本：
HTML
HTML
<div class="shell">
<div class="prizestitle">Table</div>
<div class="prizesinfo td">Info</div>
<div class="prizesdesc td">Description</div>
</div>
CSS
CSS
.td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.prizestitle {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: #6666ff;
font-size: 30px;
font-weight: 200;
}
.prizesinfo {
font-size: 25px;
}
.prizesdesc {
font-size: 18px;
}
.shell {
border: 1px solid gray;
border-collapse: collapse;
width: calc(50% - 40px);
margin: 10px;
display: inline-block;
float: left;
}
回答by Emad Armoun
You can use marginand calcfunction in css :
您可以在 css 中使用margin和calc函数：
table {
border-collapse: collapse;
border: 1px solid gray;
width: calc(50% - 10px);
float: left;
margin: 5px;
}
table {
border-collapse: collapse;
border: 1px solid gray;
width: calc(50% - 10px);
float: left;
margin: 5px;
}
th {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: #6666ff;
}
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.prizestitle {
font-size: 30px;
}
.prizesinfo {
font-size: 25px;
}
.prizesdesc {
font-size: 18px;
}<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Description</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Info</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Description</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Info</span></td>
</tr>
</table>回答by Tarek.hms
Simply just adding a margin to the table will add spaces between tables But I would tell you that it's impossible to achieve the result as you have shown by using tables to do so you should replace them with Divs and you may need to use some javascript libraries.
只需在表格中添加一个边距就会在表格之间添加空格但是我会告诉你，使用表格来实现你所展示的结果是不可能的，所以你应该用 Divs 替换它们，你可能需要使用一些 javascript 库.
to add a margin:
添加边距：
table {
border-collapse: collapse;
border: 1px solid gray;
width: 50%;
float: left;
margin:5px;
}
回答by Karl Galvez
See if this CSS does what you want
看看这个 CSS 是否符合你的要求
table {
border-collapse: collapse;
border: 1px solid gray;
width: 30%;
float: left;
margin: 10px;
}
You can adjust the width percentage and margin to get different spacing and tables per line.
您可以调整宽度百分比和边距以获得每行不同的间距和表格。
回答by arnuga3
You may play around making border wider and include this width into size of the table container like
您可以尝试使边框更宽，并将此宽度包含在表格容器的大小中，例如
table {
border: 10px solid gray;
width: 50%;
box-sizing: border-box;
float: left;
}
回答by arnuga3
Try
尝试
<table cellspacing="10">
回答by Zsolt
You can try:
你可以试试：
<table cellspacing="10">
but it doesn't work in HTML 5 as far as I know.
但据我所知，它在 HTML 5 中不起作用。
Or in the CSS insert something like this:
或者在 CSS 中插入如下内容：
table {
border-collapse: collapse;
border: 1px solid gray;
width: 50%;
float: left;
border-collapse: separate;
border-spacing: 10px;
}
