CSS表格样式纵向显示|极客教程

CSS表格样式纵向显示

在网页开发中，表格是非常常见的元素，用来展示和排列数据。通常情况下，表格的默认显示方式是横向显示，即数据从左到右依次排列，每行数据独占一行。但有时我们希望表格可以纵向显示，即数据从上到下依次排列，每列数据独占一列。本文将详细介绍如何使用CSS来实现表格样式纵向显示的效果。

实现原理

要实现表格样式纵向显示的效果，需要利用CSS中的display: flex属性。该属性可以创建一个弹性盒子，使得内部元素可以根据主轴方向排列。通过设置flex-direction: column属性，可以将内部元素沿着垂直方向排列，达到纵向显示的效果。

实现步骤

步骤1：创建表格结构

首先，我们需要创建一个基本的表格结构，包括<table>、<tr>和<td>等标签，用来展示数据。这里以一个简单的学生成绩表格为例：

<table>
  <tr>
    <td>姓名</td>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>80</td>
    <td>90</td>
    <td>85</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>75</td>
    <td>85</td>
    <td>90</td>
  </tr>
</table>

步骤2：添加CSS样式

接下来，我们需要添加CSS样式来实现表格样式纵向显示的效果。具体步骤如下：

为<table>设置display: flex属性，创建一个弹性盒子。
为<tr>设置display: flex属性，并将其沿着垂直方向排列，即设置flex-direction: column属性。
为<td>设置基本样式，使其显示为块级元素，方便对内容进行布局。

table {
  display: flex;
}

tr {
  display: flex;
  flex-direction: column;
}

td {
  display: block;
  padding: 10px;
  border: 1px solid #ccc;
}

步骤3：效果预览

完成上述步骤后，我们就可以实现表格样式纵向显示的效果了。通过在浏览器中查看页面，可以看到表格的数据已经按照纵向排列的方式显示出来，整体风格清晰简洁。

示例代码

下面是完整的示例代码，包括HTML和CSS部分：

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      display: flex;
    }

    tr {
      display: flex;
      flex-direction: column;
    }

    td {
      display: block;
      padding: 10px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>姓名</td>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
    </tr>
    <tr>
      <td>张三</td>
      <td>80</td>
      <td>90</td>
      <td>85</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>75</td>
      <td>85</td>
      <td>90</td>
    </tr>
  </table>
</body>
</html>

在浏览器中打开该页面，即可看到实现了表格样式纵向显示的效果。