How can I use margin inside td in table but without using border-collapse: separate

Question

Let say I want to make a table like this:

I can already make the example if using border-collapse: separate property but the line itself get separated like this

when I'm using border-collapse: collapse I can make the border still there but I can't make the margin itself

#home-table table {
  font-family: "Nunito", sans-serif;
  font-size: 1em;
  color: #1d3962;
  margin: 0% auto;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  max-width: 1200px;
  border: none;
  border-top: none;
}

#home-table .table-icon-img-size {
  width: 15px;
  height: 15px;
}

#home-table tr {
  border-top: solid 3px rgba(58, 115, 197, 0.1) !important;
}

#home-table th {
  font-size: 0.9em;
  color: #1d3962;
}

#home-table tr:nth-child(1) {
  border-top: none !important;
}

#home-table tr:nth-last-child(1) {
  border-bottom: none !important;
}

#home-table td {
  width: 25%;
}

#home-table .first {
  border-top: solid 3px rgba(58, 115, 197, 0.2) !important;
  border-top-radius: 10px;
}

#home-table td {
  margin: 0% 300px;
}

#home-table tr td:nth-child(1) {
  padding: 32px 38px;
  text-align: center;
}

#home-table tr th:nth-child(2) {
  text-align: center;
  font-weight: bold;
  background-color: rgba(46, 207, 47, 0.1);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  padding: 32px 38px;
}

#home-table tr td:nth-child(2) {
  background-color: rgba(46, 207, 47, 0.1);
  padding: 32px 38px;
  text-align: center;
}

#home-table tr th:nth-child(3) {
  text-align: center;
  font-weight: bold;
  background-color: rgba(219, 206, 44, 0.1);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  padding: 32px 38px;
}

#home-table tr td:nth-child(3) {
  background-color: rgba(219, 206, 44, 0.1);
  padding: 32px 38px;
  text-align: center;
}

#home-table tr th:nth-child(4) {
  text-align: center;
  font-weight: bold;
  background-color: rgba(229, 76, 110, 0.1);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  padding: 32px 38px;
}

#home-table tr td:nth-child(4) {
  text-align: center;
  color: #E54C6E;
  background-color: rgba(229, 76, 110, 0.1);
  padding: 32px 38px;
  margin: 0% 500px;
}

#home-table .test {
  padding-right: 20px;
}

#home-table tr td {
  padding: 32px 38px;
}

<div id="home-table">
  <div style="overflow-x:auto;">
    <table>
      <tr>
        <td>Diamond</td>
        <td>650</td>
        <td>500</td>
        <td>160</td>
      </tr>
      <tr>
        <td>Diamond</td>
        <td>650</td>
        <td>500</td>
        <td>160</td>
      </tr>
      <tr>
        <td>Diamond</td>
        <td>650</td>
        <td>500</td>
        <td>160</td>
      </tr>

    </table>
  </div>
</div>

Can someone help me to solve this? I'm quite confused with this problem

EDIT 1

If what I want to get is not clear I hope this image can make what I want to get more clearly

currently we still in the bottom image when the border-top line still separated but what I want to get that the border-top line still attached to it

Answer 1

I have trying to fix your issues please check this link:demo

Basically CSS property need to update, few properties need to update to get the resolution of the design issue

#home-table table {
  font-family: "Nunito", sans-serif;
  font-size: 1em;
  color: #1d3962;
  margin: 0% auto;
  border-spacing: 10px;
  width: 100%;
  max-width: 1200px;
  border: none;
  border-top: none;
}

#home-table .table-icon-img-size {
  width: 15px;
  height: 15px;
}

#home-table tr td {
  position: relative;
  /*border-top: solid 3px rgba(58, 115, 197, 0.1) !important;*/
}

#home-table tr td:before {
  content: '';
  position: absolute;
  background: rgba(58, 115, 197, 0.1) !important;
  height: 3px;
  left: -5px;
  right: -5px;
  top: 5px;
}

#home-table tr td:first-child:before {
  content: '';
  left: 0px;
}

#home-table tr td:last-child:before {
  content: '';
  right: 0px;
}

#home-table th {
  font-size: 0.9em;
  color: #1d3962;
}

#home-table tr:nth-child(1) {
  border-top: none !important;
}

#home-table tr:nth-last-child(1) {
  border-bottom: none !important;
}

#home-table td {
  width: 25%;
}

#home-table .first {
  border-top: solid 3px rgba(58, 115, 197, 0.2) !important;
  border-top-radius: 10px;
}

#home-table td {
  margin: 0% 300px;
}

#home-table tr td:nth-child(1) {
  padding: 32px 38px;
  text-align: center;
  border: 0;
}

#home-table tr th:nth-child(2) {
  text-align: center;
  font-weight: bold;
  background-color: rgba(46, 207, 47, 0.1);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  padding: 32px 38px;
}

#home-table tr td:nth-child(2) {
  background-color: rgba(46, 207, 47, 0.1);
  padding: 32px 38px;
  text-align: center;
}

#home-table tr th:nth-child(3) {
  text-align: center;
  font-weight: bold;
  background-color: rgba(219, 206, 44, 0.1);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  padding: 32px 38px;
}

#home-table tr td:nth-child(3) {
  background-color: rgba(219, 206, 44, 0.1);
  padding: 32px 38px;
  text-align: center;
}

#home-table tr th:nth-child(4) {
  text-align: center;
  font-weight: bold;
  background-color: rgba(229, 76, 110, 0.1);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  padding: 32px 38px;
}

#home-table tr td:nth-child(4) {
  text-align: center;
  color: #E54C6E;
  background-color: rgba(229, 76, 110, 0.1);
  padding: 32px 38px;
  margin: 0% 500px;
}

#home-table .test {
  padding-right: 20px;
}

#home-table tr td {
  padding: 32px 38px;
}

<div id="home-table">
  <div style="overflow-x:auto;">
    <table>
      <tr>
        <td>Diamond</td>
        <td>650</td>
        <td>500</td>
        <td>160</td>
      </tr>
      <tr>
        <td>Diamond</td>
        <td>650</td>
        <td>500</td>
        <td>160</td>
      </tr>
      <tr>
        <td>Diamond</td>
        <td>650</td>
        <td>500</td>
        <td>160</td>
      </tr>

    </table>
  </div>
</div>