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

Question

У меня есть простая HTML-таблица, подобная этой:

<table>
  <thead>
    <tr><th>Column 1</th><th>Column 2</th></tr>
  </thead>
  <tbody>
    <tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr>
    <tr class="even"><td>Value 3</td><td>Value 4</td></tr>
    <tr class="odd"><td>Value 5</td><td>Value 6</td></tr>
    <tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr>
  </tbody>
</table>

И я хотел бы оформить ее следующим образом:

• строка заголовка с тенью-тенью
• пробел между строкой заголовка и первой строкой тела

Я пробовал разные вещи:

table {
    /* collapsed, because the bottom shadow on thead tr is hidden otherwise */
    border-collapse: collapse;
}
/* Shadow on the header row*/
thead tr   { box-shadow: 0 1px 10px #000000; }
/* Background colors defined on table cells */
th         { background-color: #ccc; }
tr.even td { background-color: yellow; }
tr.odd td  { background-color: orange; }

/* I would like spacing between thead tr and tr.first-row */

tr.first-row {
    /* This doesn't work because of border-collapse */
    /*border-top: 2em solid white;*/
}

tr.first-row td {
    /* This doesn't work because of border-collapse */
    /*border-top: 2em solid white;*/
    /* This doesn't work because of the td background-color */
    /*padding-top: 2em;*/
    /* Margin is not a valid property on table cells */
    /*margin-top: 2em;*/
}

Смотрите также:http://labcss.net/#8AVUF

У кого-нибудь есть советы, как мне это сделать?Или добиться того же визуального эффекта (то есть тени тела + расстояние)?

Answer 1

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

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

РЕДАКТИРОВАТЬ лучше и проще:

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

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

Answer 2

Более того, вы можете использовать Zero-Width Non-Joiner для минимизации sinsedrix CSS:

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

Answer 3

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

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

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

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

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

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

Answer 4

То есть 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;
}

Answer 5

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

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

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

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

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

content : "\200C";

Answer 6

Это должно сработать:

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
}

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