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

Question

I am creating a timeline, with a column for each year represented in the timeline; I want these year columns to be as "skinny" (unwide) as possible. Right now they look like so:

How can I remove all the left and right padding within the cells between the years?

My current code is:

<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>

NOTE: I also want the rows to refrain from wrapping. The rows code is currently:

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

Answer 1

You can use it like this

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

Answer 2

As you are using bootstrap you can remove any padding and margins with bootstrap spacing helper classes

It has a very flexible syntax to adding or removing paddings and margings. In your case you need to ad px-0 class to your corsponding th and td tags in head and body like bellow:

<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 is equal to

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

Answer 3

if you are using bootstrap then bootstrap itself provide padding of 12px with <td> and <th> . so for making table "skinny" you need to override 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;
}