JSFiddle - React, Tailwind, and code Playground

HTML

Expected behaviour using <i>padding-right</i>
<table id="example1">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>

<hr/>
Hopefully the same behaviour as above using <i>calc</i>
<table id="example2">
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
    <tr>
      <td>Row 1</td>
      <td>Row 2</td>
      <td>Row 3</td>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>

<hr/>
<div>
Calc is working in my browser.
</div>

CSS

table {
    border-collapse: collapse;
    width: 80%
    display: table; /* required for table-layout to be used (not normally necessary; included for completeness) */
   table-layout:fixed; /* this keeps your columns with fixed with exactly the right width */
   width: 100%;
}
td, th {
   border: 1px solid black;
}
tr{
  width: 100%;
}

#example1 td:last-child, #example1 th:last-child {
  padding-right: 30px;
}

#example2 td, #example2 th {
  width: calc((100% - 30px) / (4);
}

#example2 td:last-child, #example2 th:last-child {
   width: calc((100% - 30px) / 4 + 30px);
}

div {
  width:calc(100% - 100px);
  background-color: yellow; 
}