如何建立具有基於列顯示的垂直對齊 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中文網其他相關文章！