Стилизация CSS таблиц, в которых используется display: table-row - PullRequest
Новая
       26

Стилизация CSS таблиц, в которых используется display: table-row

0 голосов
/ 18 июня 2019

Я пытаюсь стилизовать таблицу 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?

1 Ответ

2 голосов
/ 18 июня 2019

Если границы не свернуты, строки таблицы не имеют границ, они просто удерживают ячейки таблицы (которые могут иметь границы).

Установите 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, и спросите, будет ли вам лучше с реальной таблицей или с флексбоксом или сеткой).

...