html - 如何使用css在表格中创建垂直列

Question

我想以下面的格式创建一个 html 表格。

我无法找到一种方法来做到这一点。谁能帮我？

Answer 1

我不认为你可以有一个完全跨浏览器的解决方案，无论如何试试这个：

.verticalText {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}

<table border="1">
  <tbody>
    <tr>
      <td rowspan="4">
        <div class="verticalText">one</div>
      </td>
      <td>One</td>
      <td>Other</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Other</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Other</td>
    </tr>
    <tr>
      <td>One</td>
      <td>Other</td>
    </tr>
  </tbody>
</table>

在 HTML 部分，您使用属性“rowspan”来告诉单元格 (td) 跨越 n 行；您必须在随后的“跨区”单元格中删除相对单元格声明。属性“colspan”在水平方向上也是如此。此类属性的默认值为 1，并且是隐式的。

CSS 部分尝试垂直渲染图像中的文本，但它还不是 CSS 标准，因此您必须在各种浏览器中尝试。如果您无法实现完全兼容，如果文本不是动态的，您可能会被迫按图像呈现该文本。

编辑 HTML 以包含文本容器，如注释中所示。

Answer 2

使用这里rowspan查看演示

rowspan添加新行时需要更改数字。