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

Answer 2

此外,您可以使用零宽度非连接器来最小化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

虽然上述所有解决方案都很棒，但不同浏览器的结果不一致，因此我根据我在电子邮件模板方面的令人发指的经验找到了更好的方法。只需在实际 tbody 和 thead 之间添加一个虚拟 tbody，嵌套在虚拟 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>

Answer 6

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

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

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

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

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

content : "\200C";