Почему не работают сжимание границ и интервалы, когда вы нацеливаете только заголовок таблицы (TH) внутри таблицы?

Question

My HTML:

<table style="width:100%">

    <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>Age</th>

    </tr>

    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>

    </tr>

    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>

    </tr>

</table>

My CSS:

table, th, td {
margin-top:150px;
margin-bottom:150px;
border:1px solid black;



}   

th, td {
    padding:15px;
}


th {

    text-align:left;
    border-collapse:collapse;


}

Я хочу свернуть границы только TH, но это не работает. Свертывание границ и интервал между ними не работают, когда я нацелен только на TH. Я могу изменить цвет фона и отступы, а также внести другие изменения только в TH, но изменения границ, похоже, не работают. Это почему?

Примечание: прежде чем вы скажете мне, как это можно сделать другими способами, расскажите, пожалуйста, почему ЭТОТ способ не работает.

Answer 1

Потому что border-collapse - это правило стиля table, а не отдельных ячеек (td или th). Это означает, что вы устанавливаете его на элемент table, и все границы в таблице будут свернуты или разделены.

Вы можете имитировать c поведение border-collapse: separate только в td, сделав что-то "хакерское" "как вставить div внутрь td s. Посмотрите на скрипку ниже:

table {
  border-collapse: collapse;
}

th {
  border: 1px solid black;
}

td {
  padding: 2px;
}

td:first-child {
  padding-left: 0;
}

td:last-child {
  padding-right: 0;
}

td > div {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div>Cell 1</div></td>
      <td><div>cell 2</div></td>
    </tr>
    <tr>
      <td><div>Cell 3</div></td>
      <td><div>Cell 4</div></td>
    </tr>
  </tbody>
</table>

Answer 2

как все вам говорили, border-collapse - это набор правил для всего table, он говорит, как ячейки должны печататься на экране бок о бок. a box-shadow.

внутри tds:

table {
  border-collapse: collapse;
}

th {
  border: solid 2px;
  box-shadow: inset 0 -2px;
}

td {
  border: solid transparent;
  box-shadow: inset 0 0 0 2px;
  padding:3px;
}

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Cell 1 </td>
      <td> Cell 2 </td>
    </tr>
    <tr>
      <td> Cell 3 </td>
      <td> Cell 4 </td>
    </tr>
  </tbody>
</table>

за пределами

thead {
  padding-bottom: 2px;
}

th {
  border: 0;
  box-shadow: 0 -2px, inset 0 -2px, 2px 0, -2px 0, 2px -2px, -2px -2px;
  padding: 2px;
}

td {
  border: solid 2px;
}

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Cell 1 </td>
      <td> Cell 2 </td>
    </tr>
    <tr>
      <td> Cell 3 </td>
      <td> Cell 4 </td>
    </tr>
  </tbody>
</table>

Answer 3

Свойство border-collapse может применяться только к элементам <table>, но не к отдельным строкам или ячейкам

https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse