如何删除 html table 单元格中的所有左右填充？

Question

我正在创建一个时间线，时间线中每一年都有一个列；我希望这些年份的列尽可能 "skinny"（不宽）。现在他们看起来像这样：

如何删除年份之间单元格中的所有左右填充？

我当前的代码是：

<table class="table table-sm table-bordered">
  <thead class="thead-dark">
    <tr>
      <th scope="col">NAME</th>
      <th scope="col">RELATIONSHIP</th>
      <th scope="col">1794</th>
      <th scope="col">1795</th>
      <th scope="col">1796</th>

注意：我还希望行不要换行。当前的行代码是：

<tr>
      <th scope="row">John Marshall Clemens</th>
      <td>Father</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>

Answer 1

你可以这样使用它

<table cellpadding = "0">
  <tr>
    <th> Month </th>
    <th> Savings </th>
  </tr>
  <tr>
    <td> January </td>
    <td> 0 </td>
  </tr>
</table>

Answer 2

如果您使用 bootstrap，那么 bootstrap 本身会提供 12px 的填充 <td> 和 <th>。所以为了制作 table "skinny" 你需要覆盖 css.

html

<table class="table table-bordered text-center">
  <thead>
    <tr>
      <th>Name</th>
      <th>Relation</th>
      <th>1794</th>
      <th>1795</th>
      <th>1796</th>
      <th>1797</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>jhon</td>
      <td>fater</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
    </tr>
    <tr>
      <td>mark</td>
      <td>self</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
    </tr>
    <tr>
      <td>livy</td>
      <td>wife</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
      <td>~</td>
    </tr>
    </tbody>
</table>

css

th, td {
  padding: 0;
}

Answer 3

当您使用 bootstrap 时，您可以使用 bootstrap spacing helper classes

删除任何填充和边距

它具有非常灵活的语法来添加或删除填充和边距。在您的情况下，您需要将 px-0 class 广告添加到头部的相应 th 和 td 标签中，并且 body 如下所示：

<table class="table table-bordered text-center">
  <thead>
    <tr>
      <th>Name</th>
      <th>Relation</th>
      <th class="px-0">1794</th>
      <th class="px-0">1795</th>
      <th class="px-0">1796</th>
      <th class="px-0">1797</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>jhon</td>
      <td>fater</td>
      <td class="px-0">~</td>
      <td class="px-0">~</td>
      <td class="px-0">~</td>
      <td class="px-0">~</td>
    </tr>
    <tr>
      <td>mark</td>
      <td>self</td>
      <td class="px-0">~</td>
      <td class="px-0">~</td>
      <td class="px-0">~</td>
      <td class="px-0">~</td>
    </tr>
    <tr>
      <td>livy</td>
      <td>wife</td>
      <td class="px-0">~</td>
      <td class="px-0">~</td>
      <td class="px-0">~</td>
      <td class="px-0">~</td>
    </tr>
    </tbody>
</table>

px-0 等于

.px-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

如何删除 html table 单元格中的所有左右填充？

How can I remove all left and right padding in an html table cell?

html

bootstrap-table