Отображение таблицы с использованием css

Question

Рассмотрите сценарий, подобный этому.

У меня есть массив Список строковых массивов.

Я хочу представить их на изображении ниже.

В настоящее время я реализовал это как таблицу. Но это не динамично. Продвигаясь вперед, я должен зациклиться дважды, что кажется некоторым сложным.

<table> 
    <tr> 
    <td>Pack1</td> 
    <td>Ch1</td> 
    </tr> 
    <tr> 
    <td></td> 
    <td>ch2</td> 
    </tr> 
    <tr> 
    <td>Pack2</td> 
    <td>val1</td> 
    </tr> 
    <tr> 
    <td></td> 
    <td>val2</td> 
    </tr> 
</table> 

Пожалуйста, дайте мне знать любой другой подход, используя стили css.

1. Петли через каждый пакет
2. Снова петлю через каждый пакет, чтобы получить значение.

Answer 1

Это, скорее всего, будет немного горячего картофеля, поскольку не совсем понятно, что вы хотите, хотя я разместил немного более структурированный формат таблицы, который, похоже, напоминает вашу цель. Если вы знаете, как использовать colspan и rowspan, вы можете настроить таблицу (например, если вы хотите несколько строк в одном столбце), хотя рассмотрите, как таблицы предназначены и в основном стиль по умолчанию. Я добавил некоторые CSS и текст, чтобы дать вам представление о том, как (X) HTML-таблицы работают, когда вы пользуетесь вещами.

Что касается цикла, я думаю, вы можете применить идею «пакетов» к tbody элементам, которые похожи на разделы таблицы ... они являются частью одного и того же типа данных, хотя и имеют свои отдельные группы.

Комментарий, если вам нужна помощь в настройке, это не сложно.

<table summary="Describe your table here." style="border: 1px solid #aaa; border-collapse: collapse; width: 40%;"> 

<thead style="background-color: #f77;"> 
<tr><td colspan="3">Table Header</td></tr> 
</thead> 

<tfoot style="background-color: #f77;"> 
<tr><td colspan="3">Table Footer</td></tr> 
</tfoot> 


<tbody> 
<tr style="background-color: #fcc;"><th colspan="3">Pack 1 (Tbody Header)</th></tr> 
<tr><td>One</td><td>Two</td><td>Three</td></tr> 
<tr><td>One</td><td>Two</td><td>Three</td></tr> 
<tr><td>One</td><td>Two</td><td>Three</td></tr> 
</tbody> 


<tbody> 
<tr style="background-color: #fcc;"><th colspan="3">Pack 2 (Tbody Header)</th></tr> 
<tr><td>One</td><td>Two</td><td>Three</td></tr> 
<tr><td>One</td><td>Two</td><td>Three</td></tr> 
<tr><td>One</td><td>Two</td><td>Three</td></tr> 
</tbody> 

</table>