Расстояние между телом и телом

Я думаю, что он у меня есть в этой скрипке, и я обновил ваш:

tbody:before {
    content: "-";
    display: block;
    line-height: 1em;
    color: transparent;
}

ИЗМЕНИТЬ лучше и проще:

tbody:before {
    content:"@";
    display:block;
    line-height:10px;
    text-indent:-99999px;
}

Таким образом текст действительно невидим

Кроме того, вы можете использовать функцию без объединения с нулевой шириной, чтобы минимизировать CSS sinsedrix:

tbody:before {line-height:1em; content:"\200C"; display:block;}

Это даст вам некоторое пространство между заголовком и содержимым таблицы.

thead tr {
  border-bottom: 10px solid white;
}

Хотя установка цвета границы - это своего рода читерский метод, он будет работать нормально.

Исследование формы, вы не можете установить box-shadow для строки таблицы, но вы можете для ячеек таблицы:

th {
  box-shadow: 5px 5px 5px 0px #000000 ;
}

(Я не уверен, как вы хотите, чтобы тень выглядела, поэтому просто отрегулируйте указанное выше.)

Таким образом, box-shadow плохо работает с элементом tr ... но он работает с элементом псевдоконтента; sinsedrix поставил меня на правильный путь, и вот что у меня получилось:

table {
    position: relative;
}

td,th {padding: .5em 1em;}

tr.even td { background-color: yellow; }
tr.odd td  { background-color: orange; }

thead th:first-child:before {
    content: "-";

    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;

    box-shadow: 0 1px 10px #000000;
    padding: .75em 0;

    background-color: #ccc;
    color: #ccc;
}

thead th {
    padding-bottom: 2em;
}

У меня это сработало в Chrome (для других браузеров я не знаю).

.theTargethead::after
{
    content: "";
    display: block;
    height: 1.5em;
    width: 100%;
    background: white;
}

Такой код css создает пустое пространство между тегом и телом таблицы. Если я установлю фон прозрачным, первый столбец вышеупомянутых элементов tr> th покажет свой собственный цвет (зеленый в моем случае), что сделает около первых 1 см элемента :: after зеленым.

Кроме того, использование знака «-» в строке content : "-"; вместо пустой строки «» может создать проблемы при экспорте напечатанных страниц в файл, то есть в pdf. Конечно, это зависит от парсера / экспортера. Такой экспортированный файл, открытый в редакторе PDF (например: Ms word, Ms Excel, OpenOffice, LibreOffice, Adobe Acrobat Pro), все еще может содержать знак минус. Пустая строка не имеет такой проблемы. Нет проблем в обоих случаях, если распечатанная таблица html экспортируется как изображение: ничего не отображается.

Я не заметил никаких проблем, даже используя

content : "\200C";

Хотя все вышеперечисленные решения великолепны, результат в разных браузерах несовместим, поэтому я нашел лучший способ сделать это, основываясь на моем ужасном опыте работы с шаблонами электронной почты. Просто добавьте фиктивный tbody между фактическим tbody и thead, вложенный в фиктивный tbody должен быть td с высотой, установленной на желаемый интервал. Пример ниже

<table>
  <thead>
    <tr>
      <td>
      </td>
    </tr>
  </thead>
  // Dummy tbody
  <tbody>
    <tr>
      <td class="h-5"></td>
    </tr>
  </tbody>
  // Actual tbody
  <tbody class="rounded shadow-outline">
    <tr v-for="(tableRow, i) in tableBody" :key="`tableRow-${i}`">
      <td v-for="tableRowItem in tableRow" :key="tableRowItem" class="table-body">
        {{ tableRowItem }}
      </td>
    </tr>
  </tbody>
</table>

Это должно помочь:

table {
  position: relative;
}
thead th { 
  // your box shadow here
}
tbody td {
  position: relative;
  top: 2rem; // or whatever space you want between the thead th and tbody td
}

И это должно хорошо работать с большинством браузеров.