При размещении межстрочного интервала для всех строк ожидаем первый и последний, используя nth-child

Question

Я пытаюсь разместить интервал для всех строк, кроме первой и последней, с помощью nth-child, но по какой-то причине это не работает. Что я делаю неправильно?

table {
border: 1px solid black;
width: 98%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 10px 50px;
}
td {
border: 1px solid black;
}
tr:nth-child(1) td:nth-child(1) {
border-spacing : 0px 0px; 
}
tr:nth-child(1) td:nth-child(2) {
border-spacing : 0px 0px; 
}
tr:nth-child(3) td:nth-child(1) {
border-spacing : 0px 0px; 
}
tr:nth-child(3) td:nth-child(2) {
border-spacing : 0px 0px; 
}

<table>
<tr><td> row1 col1 </td><td> row1 col2 </td></tr>
<tr><td> row2 col1 </td><td> row2 col2 </td></tr>
<tr><td> row3 col1 </td><td> row3 col2 </td></tr>
<tr><td> row4 col1 </td><td> row4 col2 </td></tr>
<tr><td> row5 col1 </td><td> row5 col2 </td></tr>
</table>

Answer 1

Проверьте код ниже и вы можете подать заявку border-spacing эффект к таблице не для td or tr, вы можете использовать только для заполнения td непосредственно, а затем использовать :first-child and :last-child убрать отступы для первого и последнего td or tr,

table {
border: 1px solid black;
width: 98%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 10px 50px;
}

td {
border: 1px solid black;
padding: 50px 10px;
}

tr:first-child td,tr:last-child td {
  padding: 5px; 
}

<table>
<tr><td> row1 col1 </td><td> row1 col2 </td></tr>
<tr><td> row2 col1 </td><td> row2 col2 </td></tr>
<tr><td> row3 col1 </td><td> row3 col2 </td></tr>
<tr><td> row4 col1 </td><td> row4 col2 </td></tr>
<tr><td> row5 col1 </td><td> row5 col2 </td></tr>
</table>

Answer 2

Если я вас правильно понимаю, то border-spacing это не то, что вам нужно, но эффект должен быть достигнут с помощью отступов. Нечто похожее на следующее может дать вам вид промежутка между переменными, который вам нужен:

td {
  padding: 50px 10px;
}
tr:first-child td,
tr:last-child td {
  padding: 0; 
}

Поскольку вы говорите, что хотите нацелиться на первый и последний ряд, :first-child а также :last-child лучше подходят, чем к задаче, чем :nth-child, что лучше для более сложных выборов, таких как шаблоны (например, каждый третий ребенок и т. д.).

Я подозреваю, что границы были добавлены для ясности, но если они вам нужны, вы можете сделать что-то вроде div вокруг = содержание каждого td который имеет отступы и дает 1px границу td div (который выбирает любой div в пределах td).

Но если отступы доставят вас туда, где вы хотите быть с точки зрения расстояния, остальное можно легко взломать.