Как мне сделать прозрачный 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>
