如何创建具有基于列显示的垂直对齐 HTML 表格？

垂直对齐的 HTML 表格：实现基于列的显示

垂直表格（行垂直显示，表格标题位于左侧）在 HTML 中提出了独特的挑战。这是使用 CSS 解决此问题的简单方法：

<code class="css">tr {
  display: block;
  float: left;
}
th, td {
  display: block;
}</code>

此方法有效地翻转表格单元格的方向，允许您使用

访问它们就像在普通桌子上一样。但是，请务必注意，此方法将每个单元格视为一行，删除任何类似表格的行为，例如 rowspan 或 colspan。

示例：

至为了说明这一点，请考虑使用建议的 CSS 标记的以下 HTML 表格：

<code class="html"><table>
  <tr>
    <th>name</th>
    <th>number</th>
  </tr>
  <tr>
    <td>James Bond</td>
    <td>007</td>
  </tr>
  <tr>
    <td>Lucipher</td>
    <td>666</td>
  </tr>
</table></code>

结果将是一个垂直对齐的表格，其中包含两个“行”（表示为列）和两个“列”（表示为行）。

其他注意事项：

为了确保正确的边框渲染，您可以添加以下 CSS：

<code class="css">/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left: 0; }</code>

这将删除除了每行（列）中的第一个单元格之外的所有单元格的顶部和左侧边框，有效地创建无边框外观。

以上是如何创建具有基于列显示的垂直对齐 HTML 表格？的详细内容。更多信息请关注PHP中文网其他相关文章！