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

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/ ) 的内容。

谢谢你的帮助！

原文由 aquaelmo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 Sakaratte 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原文由 Emad Armoun 发布，翻译遵循 CC BY-SA 4.0 许可协议