CSS thead 和 tbody 之间的间距

Spacing between thead and tbody

提问by Ben

I have a simple html table like this:

我有一个简单的 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>

And I would like to style it the following way:

我想通过以下方式对其进行样式设置：

• header row with a box-shadow
• whitespace between the header row and the first body row

• 带有框阴影的标题行
• 标题行和第一个正文行之间的空白

I have tried different things:

我尝试过不同的事情：

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;*/
}

See also: http://labcss.net/#8AVUF

另见：http: //labcss.net/#8AVUF

Does anyone have any tips on how I could do this? Or achieve the same visual effect (i.e. bod-shadow + spacing)?

有没有人对我如何做到这一点有任何提示？或者达到同样的视觉效果（即体影+间距）？

回答by sinsedrix

I think I have it in this fiddleand I updated yours:

我想我在这个小提琴里有它，我更新了你的：

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

EDITbetter & simpler:

编辑更好更简单：

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

This way text is really invisible

这样文字真的是看不见的

回答by user2718944

Moreover you can use Zero-Width Non-Joiner to minimize sinsedrixCSS:

此外，您可以使用零宽度非连接器来最小化sinsedrixCSS：

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

回答by ACarter

This will give you some white space between the header and table content

这会给你一些标题和表格内容之间的空白

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

Although setting the border colour is a bit of a cheat method, it will work fine.

虽然设置边框颜色有点作弊，但它会工作得很好。

Form investigation, you can't set box-shadow to a table row, but you can to table cells:

表单调查，您不能将 box-shadow 设置为表格行，但您可以将表格单元格设置为：

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

(I'm not sure how you want the shadow to look like, so just adjust the above.)

（我不确定你想要阴影的样子，所以只需调整上面的。）

回答by Ben

So box-shadow doesn't work well on the tr element... but it does work on a pseudo content element; sinsedrix put me on the right track and this is what I ended up with:

所以 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;
}

回答by willy wonka

This worked for me on Chrome (for other browsers I don't know).

这在 Chrome 上对我有用（对于我不知道的其他浏览器）。

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

Such css code creates an empty white space between the thead and the tbody of the table. If I set the background to transparent, the first column of the above tr > th elements shows its own color (green in my case) making about the first 1 cm of the ::after element green too.

这样的 css 代码在表的 thead 和 tbody 之间创建了一个空白空间。如果我将背景设置为透明，则上述 tr > th 元素的第一列显示其自己的颜色（在我的情况下为绿色），使 ::after 元素的前 1 厘米也变为绿色。

Also using the "-" sign in the row content : "-";instead of the empty string "" can create problems when exporting the printed pages to file, i.e. pdf. Of course this is parser/exporter dependent. Such exported file opened with a pdf editor (for ex.: Ms word, Ms Excel, OpenOffice, LibreOffice, Adobe Acrobat Pro) could still contain the minus sign. The empty string doesn't have the same issue. No problems in both cases if the printed html table is exported as image: nothing is rendered.

content : "-";在将打印的页面导出到文件（即 pdf）时，在行中使用“-”符号而不是空字符串“”可能会产生问题。当然，这取决于解析器/导出器。使用 pdf 编辑器（例如：Ms word、Ms Excel、OpenOffice、LibreOffice、Adobe Acrobat Pro）打开的此类导出文件仍可能包含减号。空字符串没有相同的问题。如果将打印的 html 表导出为图像，则在这两种情况下都没有问题：没有呈现任何内容。

I didn't notice any issue even using

我什至没有注意到任何问题

content : "0C";

回答by David Gaskin

This should do the trick:

这应该可以解决问题：

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
}

And this should play nice with most browsers.

这应该适用于大多数浏览器。