thead和tbody之间的间距


72

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

有人对我如何做有任何提示吗?还是达到相同的视觉效果(即bod-shadow +间距)?



我认为桌子的边框不会塌陷,而桌子的头却无法塌陷。也许我不明白你的问题。
sinsedrix 2012年

@sinsedrix我添加了一个图形来显示样式外观。这样更清楚吗?
2012年

Answers:


144

我想我在这个小提琴中就拥有了,并且更新了您的

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

编辑得更好,更简单:

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

这样文字才真正看不见


很酷,看起来很有希望!谢谢!不幸的是,这整件事似乎只能在Firefox中使用
2012年

它适用于除IE7之外的所有浏览器。有人有针对IE7的修复程序吗?
Srdjan Dejanovic

3
设置可见性也许更好:隐藏;隐藏。而不是将文本着色为白色,因为您不想依赖于假定的背景颜色来轻松更改样式。
FriedrichGroße2014年

您也可以使用text-indent: -100%;
Joseph Spens

2
我将执行“ display:table-row”以获取行的整个宽度。
firebird631

26

此外,您可以使用零宽度非联接器以最小化sinsedrix CSS:

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

我想通过间隔tbody部分来“压缩”表。对您的代码进行变体就可以解决问题:table tbody:not(:last-child):after 我特别高兴的是:not()在所有主流浏览器上正常工作,因此我不必编写单独的位来分隔表的末尾
Stephen R

12

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

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

尽管设置边框颜色是一种作弊方法,但可以正常工作。

表单调查中,您不能将box-shadow设置为表格行,但是可以设置表格单元格:

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

(我不确定您希望阴影如何显示,因此只需调整以上内容即可。)


边界根本不适合我,因为阴影最终在边界的“中间”呈现出来了……我想tr上的盒子阴影是我的问题。使用th并不能达到我想要的效果,因为我基本上希望标题行具有“发光效果”(即该行的阴影,而不是单个单元格)
2012年

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;} 只是使其看起来更像原始版本。)
ACarter 2012年

刚意识到您问了这个问题,所以您可能已经解决了这个问题。:)
ACarter 2012年

是啊;-)我已经更新了答案,使它看起来像在问题的截图,万一别人绊倒在这个问题上...

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

0

这应该可以解决问题:

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
}

这在大多数浏览器中都应该很好用。


0

尽管上述所有解决方案都很棒,但结果在各个浏览器上都不一致,因此,根据我对电子邮件模板的丰富经验,我找到了一种更好的方法。只需在实际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>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.