Question

我原本打算上传图片，但这是不可能的，因为我还没有10个名声。所以我会尝试描述我的问题。目前我正在使用bootstrap在桌面上放置一些样式，但是一旦我这样做，表格数据就变得太紧密了，然后我会更喜欢它。有没有办法在数字上增加表数据之间的空间？

代码如下：

#TableTotal{
  font-weight: bold;
  display: block;
}

<table class="table table-striped" id="TableTotal">
  <tr>
    <td>TOTAL PLAN</td>
    <td>£1,200,000.00</td>
  </tr>
  <tr>
    <td>TOTAL ACTUALS</td>
    <td>£1400,090.267</td>
  </tr>
  <tr>
    <td>TOTAL VARIENCE</td>
    <td id="Positive">+£3,990,267.00</td>
  </tr>
</table>

Answer 1

您只能在第一列中添加一些填充

尝试：

#TableTotal td:first-child {
    padding-right: 20px; /*Or how much space you need*/
}

#TableTotal {
  font-weight: bold;
  display: block;
}
#TableTotal td:first-child {
  padding-right: 20px; /*Or how much space you need*/
}

<table class="table table-striped" id="TableTotal">
  <tr>
    <td>TOTAL PLAN</td>
    <td>£1,200,000.00</td>
  </tr>
  <tr>
    <td>TOTAL ACTUALS</td>
    <td>£1400,090.267</td>
  </tr>
  <tr>
    <td>TOTAL VARIENCE</td>
    <td id="Positive">+£3,990,267.00</td>
  </tr>
</table>

Answer 2

您在表格标记

中添加cellpadding="10"属性

<table cellpadding="10">

但在html 5中不支持，而不是这个，你可以使用CSS作为间距

th, td {
    padding: 10px;
}

https://jsfiddle.net/sLx5hhxq/5/

https://jsfiddle.net/sLx5hhxq/6/

Answer 3

您可以使用border-spacing属性。在separated borders model中，它设置相邻单元格的水平和垂直边框之间的距离。

#TableTotal {
  border-spacing: 20px 2px;
}

#TableTotal {
  font-weight: bold;
  display: block;
  border-spacing: 20px 2px;
}

<table class="table table-striped" id="TableTotal">
  <tr>
    <td>TOTAL PLAN</td>
    <td>£1,200,000.00</td>
  </tr>
  <tr>
    <td>TOTAL ACTUALS</td>
    <td>£1400,090.267</td>
  </tr>
  <tr>
    <td>TOTAL VARIENCE</td>
    <td id="Positive">+£3,990,267.00</td>
  </tr>
</table>

如何增加表数据之间的空间？

3 个答案: