How to get the inner borders of an html table to not touch outer borders?

Issue

I am trying to implement an XD design but I am having issues styling a table.

And I can't figure out how to get my internal borders in my HTML table to not touch the borders.

Can this be done using purely HTML and CSS?

Basically, I am trying to match this picture.

Not sure if it changes anything but I am building it on ReactJS

.d100 {
  width: 100%;
}
.d100 .table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 100%;
  padding: 15px 0 15px 0;
  background-color: #faf9fe;
}
.d100 .table thead {
  border-bottom: 1px solid #ccc2c2;
  color: black;
}
.d100 .table thead th {
  padding: 15px 0 15px 15px;
  text-align: left;
}
.d100 .table tbody tr {
  border-bottom: 1px solid #ccc2c2;
}
.d100 .table tbody tr td {
  text-align: left;
  color: #666;
  padding: 15px 15px 15px 15px;
}
.d100 .table tbody tr td.green {
  color: green !important;
}
.d100 .table tbody tr td.orange {
  color: orange !important;
}
.d100 .table tbody tr td.red {
  color: red !important;
}
.d100 .table tfoot tr td div {
  display: flex;
  text-align: center;
  font-weight: bolder;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-right: 10px;
  padding-left: 10px;
}
.d100 .table tfoot tr td div img {
  padding-top: 3px;
  padding-bottom: 4px;
  padding-right: 10px;
  padding-left: 10px;
  vertical-align: middle;
}
.d100 .table tfoot tr td.orange {
  color: orange !important;
}
.d100 .d10 {
  display: inline-block;
  vertical-align: middle;
  min-width: 5%;
}
.d100 .d90 {
  display: inline-block;
  width: 90%;
  word-wrap: break-word;
  word-break: break-all;
}

<div class='d100'>
  <table class='table'>
    <thead>
      <tr>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
        <th>Title</th>
      </tr>

    </thead>
    <tbody>
      <tr> 
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
      <tr> 
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>


    </tbody>
    <tfoot>
      <tr> 
          <td></td><td></td><td></td><td></td>
          <td>
            <div> 
              <span>Previous</span>
            </div>
          </td>
          <td>
            <div> 
              <span>Next</span>
            </div>
          </td>
      </tr>
    </tfoot>
  </table>
</div>

Solution

.d100 .table{
 border-collapse: collapse;
 width: 100%;
 padding: 15px 0 15px 0;
 background-color: #faf9fe;}

.d100 .table tbody tr{
 position:relative;
 width: 100%;
 display: table-row;}

.d100 .table tbody tr:after {
  position: absolute;
  width: 96%;
  height: 1px;
  content: '';
  border-bottom: 1px solid #ccc2c2;
  border: 0%;
  left: 2%;
  bottom:1%;
  margin: 0px auto;`}

Answered By - Arezou Saremian