Как убрать отступы таблицы к блокам
У меня есть таблица, я хотел сделать отступы между блоками для этого надо применить для table border-spacing, но в чем проблема , он делает отступы еще и от таблицы до блока и я делал margin в минус, но это все как-то криво, есть ли какое-то свойство для этого , чтобы не было отступа от таблицы до блока , а были только отступы между блоками ?
const app = new Vue({
el: '#app',
data() {
return {
orders: [{Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, {Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, {Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000},{Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000},{Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, {Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}, {Nameorder: 'куук', amount: 10000, Purchaseprice: 5000, Sellingprice: 10000}]
}
},
methods: {
},
});table {
overflow: hidden;
width: 1004px;
height: 348px;
border-radius: 24px;
border: 1px solid grey;
border-spacing: 8px;
}
th:nth-child(1) {
width: 300px;
}
th:nth-child(2) {
width: 109px;
}
th:nth-child(3) {
width: 198px;
}
th:nth-child(4) {
width: 206px;
}
td {
height: 40px;
background: rgba(72, 0, 255, 1);
font-weight: 700;
font-size: 20px;
line-height: 24px;
letter-spacing: -0.06em;
color: #FFFFFF;
}
tr:nth-child(2n) {
background-color:rgba(255, 0, 0, 1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<tr>
<th>Товар</th>
<th>Колличество</th>
<th>Цена закупки</th>
<th>Цена продажи</th>
</tr>
<tr v-for="order in orders">
<td>{{order.Nameorder}}</td>
<td>{{order.amount}}</td>
<td>{{order.Purchaseprice}}</td>
<td>{{order.Sellingprice}}</td>
</tr>
</table>
</div>