如何在 HTML 中建立垂直表格？

HTML 中的垂直表格渲染

傳統上，HTML 表格在頁面上水平顯示資料。但是，在某些情況下，您可能需要垂直表格，行垂直顯示，標題位於左側。

要實現此目的，可以使用CSS 來修改表格的顯示屬性：

tr { display: block; float: left; }
th, td { display: block; }

此CSS 將使表格行（

元素）表現得像列一樣，垂直顯示。表格標題 () 和表格資料 ( ) 也將垂直顯示。

但是，需要注意的是，這種方法消除了表格行為，使其不適合典型的表格運作。要解決此問題，您可以使用 CSS 邊框折疊：

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

此 CSS 確保邊框僅出現在表格單元格之間（而不是整個列周圍），從而提供正確邊框表格的外觀。

透過實作這些 CSS 規則，您可以在 HTML 中建立垂直表格，從而在呈現資料時提供更大的靈活性。

以上是如何在 HTML 中建立垂直表格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！