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

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>