使用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>