html中的垂直表头答案

【问题标题】：Vertical table headers in htmlhtml中的垂直表头
【发布时间】：2016-11-11 06:27:36
【问题描述】：

考虑以下 html 文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Test of table</title>
        <style type="text/css">
            p {text-align:justify;}
            li {text-align:justify;}
            ins {background-color:#A0FFA0;}
            del {background-color:#FFA0A0;}
            .code {background-color:#EEEEEE;}
            .codex {background-color:#FFFFE0;}
            .custom-table {
                text-align:center;
                font-family:monospace;
            }
        </style>
    </head>
    <body>
        <table border="1" class="custom-table">
            <tr>
                <th></th>
                <th>First column</th>
                <th>Second column</th>
                <th>Third column</th>
            </tr>
            <tr>
                <td>First row</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Second row</td>
                <td>2</td>
                <td>4</td>
                <td>6</td>
            </tr>
            <tr>
                <td>Third row</td>
                <td>3</td>
                <td>6</td>
                <td>9</td>
            </tr>
        </table> 
    </body>
</html>

我希望 First column、Second column、Third column（或者换句话说，custom-table 的所有 th 元素）文本不加粗，垂直书写（+90° 旋转逆时针），在标题单元格内垂直居中和水平居中。如何通过修改此文档来做到这一点？

注意：我不需要向后兼容非 html5 浏览器，不需要 javascript，也不需要外部 CSS。

这是我想要的对齐方式的示例：

【问题讨论】：

你试过transform: rotate.
@RichardHamilton 我知道。但这个 html 不适用于网站。我正在为一个委员会写一份正式文件，他们想要 html 文件格式（并且没有外部文件）。
@RichardHamilton 我刚刚上传了一张照片
如果它仍然相关，这里有一个很好的解决方案：stackoverflow.com/a/50406895/5210321

标签： css html alignment html-table

【解决方案1】：

要将th 非粗体更改为标准td

逆时针旋转

td.class-given-to-old-ths{

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

【讨论】：

【解决方案2】：

编辑：刚刚发现您希望它逆时针旋转。在这种情况下使用-90deg

要垂直书写文本，您可以使用transform: rotate(-90deg) 属性。 th 元素的默认字体粗细是粗体，所以我们需要覆盖它，使字体粗细正常。

您应该能够只使用转换，但根据浏览器的不同，您可能需要包含供应商前缀。这应该是你要找的东西

<head>
  <style>
    /* Generally, you should put CSS in a separate file, but for the purpose of this post, I'm including it in the style tag. */
    p, li { text-align: justify; }
    ins { background-color: #A0FFA0; }
    del { background-color: #FFA0A0; }
    .code { background-color: #EEEEEE; }
    .codex { background-color: #FFFFE0; }
    
    .custom-table {
      text-align: center;
      font-family: monospace;
      border-collapse: collapse;
      border-spacing: 0;
    }
    
    th {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
      width: 95px;
      font-weight: normal;
    }
    td, th {
      border: 1px solid black;
    }
    
    /* Can't eliminate the spacing no matter what I try */
    th:first-child {
      height: 100px;
    }
    th:not(:first-child) {
      height: 10px;
    }
    
    td:nth-child(2), td:nth-child(3), td:nth-child(4) {
      width: 10px;
    }
  </style>
</head>

<body>
  <table class="custom-table">
    <tr>
      <th></th>
      <th>First column</th>
      <th>Second column</th>
      <th>Third column</th>
    </tr>
    <tr>
      <td>First row</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Second row</td>
      <td>2</td>
      <td>4</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Third row</td>
      <td>3</td>
      <td>6</td>
      <td>9</td>
    </tr>
  </table>
</body>

编辑：让它看起来更像屏幕截图，但不知道如何更改单元格的宽度。看来这是我目前能做的最好的了

【讨论】：

如何拥有正确的边框？如何获得正确的单元格宽度（与水平单元格的行为相同）？
您可以通过将文本包装在th内的元素中并在其上设置position: absolute来消除标题的宽度。
此解决方案的缺点是当您将<th> 内容增加到一定程度时，它会破坏表格布局。
为什么还是这么难？