Расстояние между 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

Я думаю, что я его в этом fiddle и я обновил yours:.

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

Answer 2

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

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

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

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

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

(я не знаю, как вы хотите, чтобы тень выглядеть так просто настроить выше)

Answer 3

Так коробчатая тень не работает на элементе тра ... но это горе rk на элементе псевдосодержания; 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 4

Кроме того, вы можете использовать нулевую ширину Non-Joiner, чтобы свести к минимуму sinsedrix CSS:

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

Answer 5

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

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

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

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

Я не заметил никаких проблем даже с использованием контента: «\ 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 
} 

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