如何使用 CSS 建立垂直 HTML 表格？

建立垂直 HTML 表格

在 HTML 中，表格通常以水平行和垂直列顯示。但是，您可能會遇到想要反轉此方向的情況，以建立具有垂直行和左側表格標題的「垂直」表格。

要實現此目的，可以採用簡單的CSS 解決方案：

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

此CSS 重新排列表格內的元素，以便各個行顯示為彼此相鄰的垂直塊，表格標題儲存格顯示在左側。

存取行垂直表格

雖然 CSS 改變了表格的外觀，但它不會影響您在 HTML 程式碼中存取行的方式。您仍然可以使用

;元素來動態插入數據，就像在傳統水平表格中一樣。

其他樣式註意事項

為了進一步增強垂直表格的視覺外觀，您可以考慮:

• 使用邊框折疊來刪除相鄰單元格之間的邊框。
• 調整 的寬度和高度屬性和/ 最佳單元格尺寸的元素。

  範例程式碼

  以下是您可以自訂的垂直HTML 表格範例：

  <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>

  <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 樣式，您可以輕鬆地在HTML 中建立垂直表格，同時保持傳統表格的功能和可訪問性。

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