如何使用 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中文网其他相关文章！