Html 是否可能有一个TR元素比它包含的TD元素高得多？

在重构一个动态创建表的例程时，我发现自己正在考虑一种更好的方法来显示（有效的）节分隔符

创建的标记与此类似：

<table>
    <tr>
        <td>Column 0</td>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
    <tr>
        <td>Column 0</td>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
    <tr>
        <td colspan="5">Separator Text</td>
    </tr>
    <tr>
        <td>Column 0</td>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
    </tr>
</table>

到目前为止，我所有的努力都与此非常相似：

电流输出

我尝试了以下样式定义的几种变体：

tr.section-start {
    display: /* literally every valid value according to Chrome Dev Tools */
    flex: /* various values */
    height: 4em;
    max-height: 4em;
    line-height: 1em;
    background-color: #0F0; /* used as a highlighter */
}

tr.section-start::before {
    content: attr(data-section-text);
}

tr.section-start td {
    display: /* literally every valid value according to Chrome Dev Tools */
    flex: /* various values */
    height: 1em;
    max-height: 1em;
    line-height: 1em;
    border: 1px solid black;
}

问题是，无论我尝试了什么，我都无法让

tr.section-start

显示我想要的内容。以下是我想做的：

所需输出

假设我想做的是可能的，我如何在CSS中设计样式来实现我的目标

---

此外，考虑到我正在重新编写创建表和行的例程，我在标记上很灵活（如果需要更改），但我的任务是使页面符合标准，因此如果标记需要更改，它应该是有效的HTML5。

只需将tr设置为更高的高度：

tr.section-start {
    line-height: 5em;
}

然后html：

<table>
    <thead>...</thead>
    <tbody>
        <tr class="section-start" data-sectionText="Separator Text">
            <td>Column 0</td>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
        </tr>
        <tr>
            <td>Column 0</td>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
        </tr>
        <tr>
            <td>Column 0</td>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
        </tr>
    </tbody>
    <tfoot>...</tfoot>
    <caption />
</table>

...
第0列
第1栏
第2栏
第3栏
第4栏
第0列
第1栏
第2栏
第3栏
第4栏
第0列
第1栏
第2栏
第3栏
第4栏
...

---

是的，你可以像这样完成它。。。至少这是我认为你想要的

唯一的问题是，如果你有bg颜色的细胞，然后它会显示通过边界

。部分开始{
边框顶部：20px实心透明
}

...
第0列
第1栏
第2栏
第3栏
第4栏
第0列
第1栏
第2栏
第3栏
第4栏
第0列
第1栏
第2栏
第3栏
第4栏
第0列
第1栏
第2栏
第3栏
第4栏
...

添加以下样式：

table {
  position: relative;      /* for absolute-positioned pseudo-elements */
}

td {
  padding: 0.5em;
}

tr.section-start::after {  /* use ::after instead of ::before */
  content: attr(data-sectionText);
  position: absolute;      /* positioned based on table */
  left: 0;                 /* stretch from start to */
  right: 0;                /* ... end of the table row */
  line-height: 30px;       /* height of the section text */
  padding: 0 0.5em;        /* maintain cell's padding */
}

.section-start td {
  padding-top: calc(30px + 0.5em);  /* height of the section text + the cell's padding */
}

诀窍是在伪元素之后使用

：：。
：：before
伪元素在行首创建一个您不需要的单元格。在行的末尾创建它并不重要，因为您可以根据需要使用CSS移动它

片段：


*{
框大小：边框框；
}
桌子{
位置：相对；/*用于绝对定位元素*/
边界间距：0；
边框：1px纯黑；
}
运输署{
填充：0.5em；
左边框：1px实心#ddd；
边框底部：1px实心#bbb；
}
tr.section-start:：after{/*使用：：after代替：：before*/
内容：attr（数据部分文本）；
位置：绝对；/*根据表格定位*/
左：0；/*从起点延伸到终点*/
右：0；/*…表格行的末尾*/
行高：30px；/*节文本的高度*/
背景：ddd；
边框：1px实心#888；
填充：0.5em；
}
.路段起点td{
背景：黄色；
顶部填充：计算（30px+0.5em）；/*节文本高度+一些填充*/
}

第0列
第1栏
第2栏
第3栏
第4栏
第0列
第1栏
第2栏
第3栏
第4栏
第0列
第1栏
第2栏
第3栏
第4栏
第0列
第1栏
第2栏
第3栏
第4栏
测试宽度的额外文本
第1栏
第2栏
第3栏
第4栏
这确实会使行更高，但是
td
元素会拉伸以填充额外的高度，无论我是否为
td
元素指定了
行高
。我不确定您还有什么其他样式，但您可以为
td
元素提供透明的厚边框，这对你有用吗？如果它让我的输出看起来像标记为期望输出的图像，我很乐意尝试它。。。。我假设alpha为
0
的
rgba
颜色可以获得透明的边框颜色？我有一个解决方案，但如果表中只有一个部分，它就可以工作。这是否值得发布？@pete您只需为分隔行td设置
边框顶部：20px实心透明
，这将为您提供内容向下推的视觉效果，但如果您的单元格具有bg颜色，它将显示通过。添加了一个answer@RickHitchcock所谓节，您是指只有一个
tr
，其类为
节开始
？还是只喜欢一个
t车身
？我需要能够使用
tbody
中的
部分start
对多行进行分类。非常接近我要查找的内容！谢谢，请投赞成票。是否存在防止受影响行中的
td
元素垂直拉伸以填充可用高度的方法？否则，所需的
边框
属性会使其看起来非常奇怪…：）在重新检查了您的代码片段（它呈现的正是我想要的方式）之后，我意识到问题在于如何将样式应用到实际的表中。。。显然我今天早上需要更多的咖啡因。谢谢你的回答！哇，这是一个有趣的挑战：）
table {
  position: relative;      /* for absolute-positioned pseudo-elements */
}

td {
  padding: 0.5em;
}

tr.section-start::after {  /* use ::after instead of ::before */
  content: attr(data-sectionText);
  position: absolute;      /* positioned based on table */
  left: 0;                 /* stretch from start to */
  right: 0;                /* ... end of the table row */
  line-height: 30px;       /* height of the section text */
  padding: 0 0.5em;        /* maintain cell's padding */
}

.section-start td {
  padding-top: calc(30px + 0.5em);  /* height of the section text + the cell's padding */
}