Как добавить пустые ячейки в таблицу HTML, чтобы в строке было столько же ячеек, сколько в строке с данными?

Question

У меня есть таблица HTML, в которую импортированы данные с использованием * ngFor.В некоторых строках таблицы содержится 12 элементов данных, поэтому в нем 12 столбцов, но в некоторых строках есть только 2 элемента данных, поэтому в нем только 2 столбца.

Я пытался использовать пустые ячейки: показать вCSS, но из-за того, что лишние ячейки, которые я хочу показать, не содержат никаких данных, они не отображаются.

Я также пытался добавить лишние пустые элементы <td>, но потом, потому что я использую*ngFor он также добавляет пустые ячейки в конец каждой строки, поэтому они по-прежнему неравномерны.

Я сделал базовый StackBlitz , чтобы продемонстрировать проблему.В этом примере я хочу иметь серый фон для всех ячеек, даже если у них нет данных.

Каков наилучший способ сделать это?

Answer 1

Вы можете использовать его, используя colspan и rowspan для столбцов и строк:

<table>
    <tr>
        <th colspan="2">65</th>
        <th colspan="2">40</th>
        <th colspan="2">20</th>
    </tr>
    <tr>
        <th>Men</th>
        <th>Women</th>
        <th>Men</th>
        <th>Women</th>
        <th>Men</th>
        <th>Women</th>
    </tr>
</table>

Подробнее здесь: https://html.com/tables/rowspan-colspan/

Вы также можете избежать использования таблиц и создать весь макет с DIV и сеткой или Flexbox.

Чтобы узнать больше о CSS Grid: https://css -tricks.com / snippets / css / complete-guide-grid /

Чтобы узнать больше о CSS Flexbox: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Пример с пустыми ячейками: https://codepen.io/fabiozanchi/pen/QXrPbV

Answer 2

измените таблицу с помощью следующего кода.это будет отлично работать.

<table id="table">
 <tr>
   <td *ngFor = "let col of tableColumns">{{col}}</td>
 </tr>
 <tr *ngFor = "let data of array">
   <td *ngFor = "let col of tableColumns; index as i">{{data.split(',')[i]}}</td>
 </tr>
</table>

добавить строку заголовка с этим массивом

tableColumns = ['HEADER1', 'HEADER2', 'HEADER3', 'HEADER4'];

Answer 3

Я думаю, это может быть то, что вы пытаетесь сделать

<table class="table table-bordered">
<tr>
    <th colspan="2">65</th>
    <th colspan="2">40</th>
    <th colspan="2">20</th>
</tr>
<tr>
    <th>Men</th>
    <th>Women</th>
    <th>Men</th>
    <th>Women</th>
    <th>Men</th>
    <th>Women</th>
</tr>
<tr>
    <th>Men 1</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>Women1</th>
    <th>&nbsp;</th>
    <th>Women2</th>
</tr>
</table>