如何使用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检查DEMO HERE

添加新行时，您需要更改rowspan号码。