Question

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

创建的标记看起来类似于：

separator

我认为<table> <thead>...</thead> <tbody> <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 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> </tbody> <tfoot>...</tfoot> <caption /> </table>作为纯CSS更好，而不是单独的行（如果没有别的话，对表格进行排序变得更加简单）。因此，我更愿意生成更像这样的标记：

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

问题在于，无论我尝试什么，我都无法让{{1}}显示我喜欢它的方式。这就是我想要做的事情：

所需的输出

假设我想做的事情是可能的，我如何在CSS中设置它以实现我的目标？

另外，鉴于我正在重新创建创建表和行的例程，我对标记很灵活（如果需要更改），但我的任务是将页面提升到标准，所以如果标记需要更改，它应该是有效的HTML5。

Answer 1

添加以下样式：

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

诀窍是使用::after伪元素。 ::before伪元素在行的开头处创建一个单元格，这是您不想要的。在行尾创建它并不重要，因为您可以根据需要使用CSS移动它。

<强>段：

* {
  box-sizing: border-box;
}

table {
  position: relative;  /* for absolute-positioned elements */
  border-spacing: 0;
  border: 1px solid black;
}

td {
  padding: 0.5em;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #bbb;
}

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 */
  background: #ddd;
  border: 1px solid #888;
  padding: 0 0.5em;
}

.section-start td {
  background: yellow;
  padding-top: calc(30px + 0.5em);  /* height of the section text + some padding */
}

<table>
  <tbody>
    <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 class="section-start" data-sectionText="Separator One">
      <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 class="section-start" data-sectionText="Separator Two">
      <td>Extra text to test width</td>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
      <td>Column 4</td>
    </tr>
  </tbody>
</table>

Answer 2

只需将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>

Plunker

Answer 3

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

唯一的问题是，如果您的单元格有bg颜色，那么它将通过边框显示

.section-start td {
  border-top: 20px solid transparent
}

<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 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>
  </tbody>
  <tfoot>...</tfoot>
  <caption />
</table>

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

3 个答案: