thead 和 tbody 之间的间距

Posted 2023-03-06

【中文标题】thead 和 tbody 之间的间距

【英文标题】：Spacing between thead and tbody

【发布时间】：2012-03-04 18:00:53

【问题描述】：

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

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

【问题讨论】：

可能类似于：***.com/questions/6012924/box-shadow-on-trs

我不认为你可以对表体进行边框折叠，但不能对表头进行边框折叠。或者我不明白你的问题。

@sinsedrix 我添加了一个图形来显示样式应该是什么样子。是不是更清楚了？

【参考方案1】：

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

【讨论】：

这是一个很棒的技术！非常感谢！

【参考方案2】：

我想我在这个fiddle 中有它，我更新了yours：

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

编辑更好更简单：

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

这样文字真的不可见

【讨论】：

非常酷，这看起来很有希望！谢谢！不幸的是，这整件事似乎只在 Firefox 中有效......

也许最好设置visibility: hidden;而不是将文本着色为白色，因为您不想依赖假定的背景颜色来轻松更改样式。

我会做 "display:table-row" 来获取行的全宽。

令人惊讶的是，快到 2020 年了，我们仍然不得不使用这种 hack 来在表头和表体之间创建空间，这太疯狂了 :)

@AlexanderCherednichenko 这篇文章来自 2012 年，所以请在 2022 年回来庆祝 10 岁生日 :)

【参考方案3】：

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

.theTargethead::after

    content: "";
    display: block;
    height: 1.5em;
    width: 100%;
    background: white;

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

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

我没有发现任何问题，即使使用

content : "\200C";

【参考方案4】：

这应该可以解决问题：

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

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

【参考方案5】：

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

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

【讨论】：

我想通过分隔 tbody 部分来“分块”表格。您的代码的一个变体起到了作用：table tbody:not(:last-child):after 我特别高兴:not() 在所有主要浏览器中都可以使用，因此我不必编写单独的位来取消表格末尾的空间

【参考方案6】：

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

【讨论】：

你已经做到了。我建议添加：td,th padding: .5em 1em; table border-collapse: collapse; thead th:first-child:before height:1.8em; （只是让它看起来更像原版。）

刚刚意识到您提出了这个问题，所以您可能已经解决了这个问题。 :)

是的 ;-) 我已经更新了答案，使它看起来像问题中的屏幕截图，以防其他人偶然发现这个问题......

【参考方案7】：

这会在标题和表格内容之间留出一些空白

thead tr 
  border-bottom: 10px solid white;

虽然设置边框颜色有点作弊，但还是可以的。

表格调查，不能给表格行设置box-shadow，但是可以给表格单元格设置：

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

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

【讨论】：

Border 对我根本不起作用，因为阴影最终会呈现在边框的“中间”......我猜 tr 上的 box-shadow 是我的问题。使用 th 并没有给我想要的效果，因为我基本上希望标题行具有“发光效果”（即行的阴影，而不是单个单元格）