Vertikale Tabelle im html-Header

Betrachten Sie die folgende html-Datei:

<!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>

Möchte ich die First column, Second column, Third column (oder in anderen Worten, alle die th Elemente der custom-table) Texte, die zu nicht-Fett, vertikal geschrieben (+90° - Drehung gegen den Uhrzeigersinn) vertikal zentriert und horizontal zentriert innerhalb der header-Zellen. Wie zu tun, dass durch Modifizierung dieses Dokument?

Hinweis: ich brauche keine Abwärtskompatibilität mit nicht-html5-Browser, ich will nicht javascript, und ich möchte nicht ein externes CSS.

Hier ist ein Beispiel für die Art der Ausrichtung, die ich will:

Vertikale Tabelle im html-Header

Haben Sie versucht, die transform: rotate.
Ich weiß. Aber das html ist nicht für eine Webseite. Ich Schreibe ein offizielles Dokument für einen Ausschuss, und Sie wollen die html-Datei-format (und keine externe Datei).
Ich habe gerade kein Bild hochgeladen
es ist eine gute Lösung hier, falls es noch relevant ist: stackoverflow.com/a/50406895/5210321

InformationsquelleAutor Vincent | 2016-07-08

Edit: Gerade herausgefunden, Sie wollte es gedreht counter-colockwise. In diesem Fall verwenden Sie -90deg

Text vertikal geschrieben werden, können Sie verwenden Sie die transform: rotate(-90deg) Eigenschaft. Die Standard-schriftart-Gewicht für th Elemente Fett ist, so brauchen wir außer Kraft setzen, so dass die font-weight normal.

Sollten Sie in der Lage sein, um Weg mit nur verwandeln, aber, je nach browser, müssen Sie möglicherweise gehören die vendor-Präfixe.
Dies sollte sein, was du bist suchen für

HTML:

<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>

Edit: Hab es, zu sehen eher aus wie der screenshot, aber konnte nicht herausfinden, wie ändern Sie die Breite der Zellen. Sieht aus wie diese ist die beste die ich bis jetzt tun können

Wie Sie die richtigen Grenzen? Wie man die richtige cell width (dasselbe Verhalten wie bei der horizontalen)?
Können Sie beseitigen die Breite des headers, indem er den text in einem element innerhalb der th und Einstellung position: absolute auf Sie.
Nachteil dieser Lösung ist, dass, wenn Sie erhöhen sind <th> Inhalte zu einem gewissen Grad, wird es brechen das Tisch-layout.
Warum ist das immer noch so effing schwer?

InformationsquelleAutor Richard Hamilton

Machen die th nicht Fett ändern Sie standard - td

für die Drehung gegen den Uhrzeigersinn

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

}

InformationsquelleAutor Artem Ankudovich

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.