Question

考虑以下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（换句话说，th）文本的所有custom-table元素都是非 - 粗体，垂直书写（逆时针旋转+ 90°），垂直居中并在标题单元格内水平居中。如何通过修改此文档来做到这一点？

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

以下是我想要的对齐类型的示例：

Answer 1

编辑：刚发现你想让它逆时针旋转。在这种情况下，请使用-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>

编辑：让它看起来更像截图，但无法弄清楚如何更改单元格的宽度。看起来这是我现在能做的最好的

Answer 2

要使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);

}

html中的垂直表头

2 个答案: