Question

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

.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>

这对样式没有任何作用。

我尝试将标头包装在div中，这将允许我设置其样式，但随后它不再像表一样工作，并且第一标头行停止与主要内容对齐。

如何设置此CSS表格的样式？

Answer 1

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

设置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是否真的是正确的方法，并询问使用真正的表或flexbox或网格布局是否会更好）。

在显示以下样式的CSS表格上样式：使用表行

1 个答案: