考虑这样的场景。
我有字符串数组的数组列表。
我想用下图表示它们。
目前我已经将其实现为表。但这不是动态的。接下来我必须循环两次,这似乎有些困难。
<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 样式的方法。
- 遍历每个包
- 再次遍历每个包以获取值。
最佳答案
这可能有点像烫手山芋,因为它并不完全清楚您到底想要什么,尽管我已经发布了一些似乎与您的目标相似的结构化表格格式。如果您知道如何使用 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>
关于html - 使用 css 的表表示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16766570/