css中制作竖表格

在CSS中，我们可以使用表格来展示数据，而竖表格是指表格的行和列方向相反，行变为列，列变为行。制作竖表格的方法有很多种，下面我将介绍一种常用的方法。

我们需要使用HTML来创建一个表格结构，然后使用CSS来控制表格的样式。我们可以使用`<table>`元素来创建表格，使用`<tr>`元素来创建表格的行，使用`<td>`元素来创建表格的单元格。示例代码如下：

<table>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容4</td>
    <td>内容5</td>
    <td>内容6</td>
  </tr>
  <tr>
    <td>内容7</td>
    <td>内容8</td>
    <td>内容9</td>
  </tr>
</table>

以上代码创建了一个简单的3行3列的表格。接下来，我们可以使用CSS来将这个表格变为竖表格。

我们可以使用`transform`属性来旋转表格，将行变为列。示例代码如下：

table {
  transform: rotate(-90deg);
}

通过设置`rotate(-90deg)`，我们可以将表格逆时针旋转90度，使得行变为列。但是需要注意的是，旋转后的表格可能会导致内容溢出或者表格尺寸不正常。为了解决这个问题，我们可以使用`transform-origin`属性来调整旋转的基点。示例代码如下：

table {
  transform: rotate(-90deg);
  transform-origin: top left;
}

通过设置`transform-origin: top left`，我们将旋转的基点设置在表格的左上角，这样可以确保表格的位置和尺寸不变。

我们还可以使用`writing-mode`属性来实现竖排文字。示例代码如下：

td {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

通过设置`writing-mode: vertical-lr`，我们可以让单元格中的文字竖向排列。通过设置`text-orientation: upright`，可以确保文字的方向正确显示。

需要注意的是，以上代码只是实现了基本的竖表格效果。如果需要进一步美化表格，我们可以使用CSS的其他属性，如`border`、`background-color`等来设置边框和背景颜色。还可以使用CSS框架或者自定义样式来实现更复杂的竖表格效果。

总结一下，制作竖表格可以使用`transform`属性将表格旋转，使用`transform-origin`属性调整旋转基点，使用`writing-mode`属性实现竖排文字。通过合理运用这些属性，我们可以轻松地制作出漂亮的竖表格。