如何使用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以在注释中包含文本容器.