如何在 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中文網其他相關文章！