0

考虑这样的场景。

我有字符串数组的数组列表。

我想在下面显示的图像中表示它们。 在此处输入图像描述

目前我已将其实现为表。但这不是动态的。展望未来，我必须循环两次，这似乎有些困难。

<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. 再次循环遍历每个包以获取值。
4

1 回答 1

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>
于 2014-05-30T08:06:26.390 回答