为 CSS 表设置样式，其中使用了显示：table-row

Question

我正在尝试设置 CSS table 样式以在每一行周围绘制一个灰色框，并在每一行的 grey/white 背景之间交替。

.table_row_line {
  border: 2px solid darkgrey;
  width: 100%;
  height: 100%;
  padding: 5px;
}

<section style="display: table;">
  <header class="table_row_line" style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </header>
  <div style="display: table-row;">
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
    <div style="display: table-cell;"></div>
  </div>
</section>

这对样式没有任何影响。

我曾尝试将 header 包装在 div 中，这将允许我设置它的样式，但它随后不再像 table 和第一个 header ] 行停止与主要内容对齐。

我该如何设计这个 css table？

Answer 1

除非折叠边框，table 行没有边框，它们只是将 table 个单元格（可以有边框）固定在适当的位置。

设置border-collapse: collapse.

section {
  border-collapse: collapse;
}

.table_row_line {
  border: 2px solid darkgrey;
  width: 100%;
  height: 100%;
  padding: 5px;
}

<section style="display: table;">
  <header class="table_row_line" style="display: table-row;">
    <div style="display: table-cell;">1</div>
    <div style="display: table-cell;">2</div>
    <div style="display: table-cell;">3</div>
  </header>
  <div style="display: table-row;">
    <div style="display: table-cell;">4</div>
    <div style="display: table-cell;">5</div>
    <div style="display: table-cell;">6</div>
  </div>
</section>

（还要考虑 display: table 是否真的是正确的方法，并询问使用真正的 table 还是使用 flexbox 或网格布局会更好）。

为 CSS 表设置样式，其中使用了显示：table-row

Styling CSS tables where display: table-row is used

html

css

css-tables