Question

我希望页面上的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;
}

这是jsfiddle：https://jsfiddle.net/ohLa00m7/1/

这里有类似于盒子的东西（http://www.awwwards.com/blog/）就是我要找的东西。

感谢您的帮助！

Answer 1

您可以在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>

Answer 2

只需在表格中添加边距即可在表格之间添加空格但是我会告诉你，通过使用表格来显示结果是不可能的，你应该用Div替换它们，你可能需要使用一些javascript库。

添加保证金：

table {
border-collapse: collapse;
border: 1px solid gray;
width: 50%;
float: left;
margin:5px;
}

Answer 3

看看这个CSS是否符合您的要求

table {
    border-collapse: collapse;
    border: 1px solid gray;
    width: 30%;
    float: left;
    margin: 10px;
}

您可以调整宽度百分比和边距，以获得每行不同的间距和表格。

Answer 4

使用<div>代替表格会更好。

此代码的我的版本：

<强> HTML

<div class="shell">
    <div class="prizestitle">Table</div>
    <div class="prizesinfo td">Info</div>
    <div class="prizesdesc td">Description</div>
</div>

<强> 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;
}

Answer 5

您可以尝试：

 <table cellspacing="10">

但据我所知，它在HTML 5中不起作用。

或者在CSS中插入如下内容：

table {
 border-collapse: collapse;
 border: 1px solid gray;
 width: 50%;
 float: left;
 border-collapse: separate;
 border-spacing: 10px;
}

Answer 6

尝试

<table cellspacing="10">

Answer 7

您可以玩边框使边框更宽，并将此宽度包含在表格容器的大小中，如

table {
   border: 10px solid gray;
   width: 50%;
   box-sizing: border-box;
   float: left;
}

在HTML中的两个不同表之间放置一个空格

7 个答案: