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 以包含文本容器，如注释中所示。