如何在 HTML 中使用 CSS 创建垂直表头？

HTML 中的垂直表头

在标准 HTML 表格中，行水平显示，表头位于顶部。但是，在某些情况下，您可能希望创建在左侧具有垂直行和标题的表格。

要实现此目的，您可以利用 CSS 修改行和表格单元格的显示。一个简单的 CSS 修复是：

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

此 CSS 代码强制每行显示为块元素并向左浮动，从而有效地创建垂直行。显示：块；表格单元格上的设置可确保它们也显示为垂直行中的块。

请注意，此 CSS 解决方案假定您的表格单元格是单行。如果您有多行单元格，表格行为可能会崩溃。

为了增强显示效果，您可以添加额外的 CSS 规则来管理边框并删除不需要的边框：

<code class="css">/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

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

使用此 CSS，您可以创建具有垂直行的表格，这些表格既具有视觉吸引力，又通过

保持可访问行的功能。标签。

以上是如何在 HTML 中使用 CSS 创建垂直表头？的详细内容。更多信息请关注PHP中文网其他相关文章！