Как мне сделать прозрачный border у таблицы?

Вот макет, так должно быть: введите сюда описание изображения

Вот мой код:

<teamplate>
     <table
        class="table-auto  text-center  justify-end m-left w-1/2 table-statistic"
      >
        <thead class="border__thead border-gray-400 bg-gray-100">
          <tr class="table__header">
            <th class="th"></th>
            <th class="table__title">{{ underlyingChoice }}</th>
            <th class="table__title">%</th>
            <th class="table__title__USD">USD</th>
          </tr>
        </thead>
        <tbody class="wrapper__table border border-gray-400">
          <tr class="table__border border-gray-400">
            <td class="field__description">Amount of underlying</td>
            <td class="field__values">{{ tableData[underlyingChoice]["Amount of underlying"] }}</td>
            <td class="field__values">{{ tableData["%"]["Amount of underlying"] }}</td>
            <td class="field__values">{{ tableData["USD"]["Amount of underlying"] }}</td>
          </tr>
          <tr class="border-gray-400 bg-emerald-200">
            <td class="field__description">Max profit</td>
            <td class="field__values">{{ tableData[underlyingChoice]["Max profit"].toFixed(2) }}</td>
            <td class="field__values">{{ tableData["%"]["Max profit"].toFixed(2) }}</td>
            <td class="field__values">{{ tableData["USD"]["Max profit"].toFixed(2) }}</td>
          </tr>
          <tr class="border-gray-400">
            <td class="field__description">Structure product price</td>
            <td class="field__values">{{tableData[underlyingChoice]["Structure product price"].toFixed(2)}}
            </td>
            <td class="field__values">{{ tableData["%"]["Structure product price"].toFixed(2) }}</td>
            <td class="field__values">{{ tableData["USD"]["Structure product price"].toFixed(2) }}
            </td>
          </tr>
          <tr class="border-gray-400">
            <td class="field__description">Maintenance margin</td>
            <td class="field__values">{{ tableData[underlyingChoice]["Maintenace margin"].toFixed(2) }}
            </td>
            <td class="field__values">{{ tableData["%"]["Maintenace margin"].toFixed(2) }}</td>
            <td class="field__values">{{ tableData["USD"]["Maintenace margin"].toFixed(2) }}</td>
          </tr>
          <tr class="border-gray-400">
            <td class="field__description">Total margin</td>
            <td class="field__values">{{ tableData[underlyingChoice]["Total margin"].toFixed(2) }}
            </td>
            <td class="field__values">{{ tableData["%"]["Total margin"].toFixed(2) }}</td>
            <td class="field__values">{{ tableData["USD"]["Total margin"].toFixed(2) }}</td>
          </tr>
        </tbody>
      </table>
</teamplate>
<style scoped>

.table-statistic td {
  padding: 5px 10px;
  border: 1px solid;
}
.input {
  background: none;
  border: 1px solid rgba(65, 54, 241, 1);
  color: #ffffff;
  font-family: Gilroy;
  border-radius: 4px;
  opacity: 0.8;
}
.description {
  font-family: Gilroy;
  color: #ffffff;
  font-size: 14px;
  line-height: 180%;
  font-style: normal;
  font-weight: normal;
}
.field__description {
  font-family: Gilroy;
  color: #ffffff;
  font-size: 14px;
  line-height: 100%;
  order: 0;
  flex-grow: 0;
  margin: 0px 10px;
}
.field__values {
    font-family: Gilroy;
  color: #ffffff;
  font-size: 14px;
  line-height: 100%;
  order: 0;
  flex-grow: 0;
  margin: 0px 10px;
}
.table__header {
  background: linear-gradient(270deg, #8743FF 0%, #4136F1 100%);

}

.table__title {
      font-family: Gilroy;
  color: #ffffff;
  font-size: 14px;
  line-height: 100%;
  order: 0;
  flex-grow: 0;
  margin: 0px 10px;
  padding: 13px 0 13px 0;
}
.table__title__USD {
        font-family: Gilroy;
  color: #ffffff;
  font-size: 14px;
  line-height: 100%;
  order: 0;
  flex-grow: 0;
  margin: 0px 10px;
  padding: 13px 0 13px 0;
  border-top-right-radius: 18px;
}
.th {
  border-top-left-radius: 18px
}


</style>

Вот, что я имею на данный момент: введите сюда описание изображения


Ответы (2 шт):

Автор решения: Dima Vatral
.table-statistic td {
 padding: 5px 10px;
 border: 1px solid;
}

здесь надо удалить border

.table-statistic td {
 padding: 5px 10px;
}
→ Ссылка
Автор решения: nazarpunk

Приложить рабочий пример в редакторе сайта было так сложно?

body {
  background-color: #27214b;
}

:root {
  --br: 18px;
  --bc: blue;
}

.table-statistic {
  border-spacing: 0;
}

.table-statistic td {
  padding: 5px 10px;
  border-top: 0;
  border-bottom: 0;
}

.table-statistic thead th:first-child {
  border-top-left-radius: var(--br);
}

.table-statistic thead th:last-child {
  border-top-right-radius: var(--br);
}

.table-statistic tbody tr:last-child td {
  border-bottom: 1px solid var(--bc);
}

.table-statistic tbody td:first-child {
  border-left: 1px solid var(--bc);
}

.table-statistic tbody td:last-child {
  border-right: 1px solid var(--bc);
}

.table-statistic tbody td:not(:last-child) {
  border-right: 1px solid white;
}

.table-statistic tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--br);
}

.table-statistic tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--br);
}

.input {
  background: none;
  border: 1px solid rgba(65, 54, 241, 1);
  color: #ffffff;
  font-family: Gilroy;
  border-radius: 4px;
  opacity: 0.8;
}

.description {
  font-family: Gilroy;
  color: #ffffff;
  font-size: 14px;
  line-height: 180%;
  font-style: normal;
  font-weight: normal;
}

.field__description {
  font-family: Gilroy;
  color: #ffffff;
  font-size: 14px;
  line-height: 100%;
  order: 0;
  flex-grow: 0;
  margin: 0px 10px;
}

.field__values {
  font-family: Gilroy;
  color: #ffffff;
  font-size: 14px;
  line-height: 100%;
  order: 0;
  flex-grow: 0;
  margin: 0px 10px;
}

.table__header {
  background: linear-gradient(270deg, #8743FF 0%, #4136F1 100%);
}

.table__title {
  font-family: Gilroy;
  color: #ffffff;
  font-size: 14px;
  line-height: 100%;
  order: 0;
  flex-grow: 0;
  margin: 0px 10px;
  padding: 13px 0 13px 0;
}

.table__title__USD {
  font-family: Gilroy;
  color: #ffffff;
  font-size: 14px;
  line-height: 100%;
  order: 0;
  flex-grow: 0;
  margin: 0px 10px;
  padding: 13px 0 13px 0;
}
<table class="table-auto  text-center  justify-end m-left w-1/2 table-statistic">
  <thead class="border__thead border-gray-400 bg-gray-100">
    <tr class="table__header">
      <th class="th"></th>
      <th class="table__title">{{ underlyingChoice }}</th>
      <th class="table__title">%</th>
      <th class="table__title__USD">USD</th>
    </tr>
  </thead>
  <tbody class="wrapper__table border border-gray-400">
    <tr class="table__border border-gray-400">
      <td class="field__description">Amount of underlying</td>
      <td class="field__values">{{ tableData[underlyingChoice]["Amount of underlying"] }}</td>
      <td class="field__values">{{ tableData["%"]["Amount of underlying"] }}</td>
      <td class="field__values">{{ tableData["USD"]["Amount of underlying"] }}</td>
    </tr>
    <tr class="border-gray-400 bg-emerald-200">
      <td class="field__description">Max profit</td>
      <td class="field__values">{{ tableData[underlyingChoice]["Max profit"].toFixed(2) }}</td>
      <td class="field__values">{{ tableData["%"]["Max profit"].toFixed(2) }}</td>
      <td class="field__values">{{ tableData["USD"]["Max profit"].toFixed(2) }}</td>
    </tr>
    <tr class="border-gray-400">
      <td class="field__description">Structure product price</td>
      <td class="field__values">{{tableData[underlyingChoice]["Structure product price"].toFixed(2)}}
      </td>
      <td class="field__values">{{ tableData["%"]["Structure product price"].toFixed(2) }}</td>
      <td class="field__values">{{ tableData["USD"]["Structure product price"].toFixed(2) }}
      </td>
    </tr>
    <tr class="border-gray-400">
      <td class="field__description">Maintenance margin</td>
      <td class="field__values">{{ tableData[underlyingChoice]["Maintenace margin"].toFixed(2) }}
      </td>
      <td class="field__values">{{ tableData["%"]["Maintenace margin"].toFixed(2) }}</td>
      <td class="field__values">{{ tableData["USD"]["Maintenace margin"].toFixed(2) }}</td>
    </tr>
    <tr class="border-gray-400">
      <td class="field__description">Total margin</td>
      <td class="field__values">{{ tableData[underlyingChoice]["Total margin"].toFixed(2) }}
      </td>
      <td class="field__values">{{ tableData["%"]["Total margin"].toFixed(2) }}</td>
      <td class="field__values">{{ tableData["USD"]["Total margin"].toFixed(2) }}</td>
    </tr>
  </tbody>
</table>

→ Ссылка