Vertikale Tabellenköpfe in html

die folgende HTML-Datei vor:Vertikale Tabellenköpfe in 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>

Ich möchte die First column, Second column, Third column (oder in anderen Worten, alle th Elemente der custom-table) Texte nicht fett sein , vertikal geschrieben (+ 90 ° -Drehung gegen den Uhrzeigersinn), vertikal zentriert und horizontal in Header-Zellen zentriert. Wie man das macht, indem man dieses Dokument ändert?

Hinweis: Ich brauche keine Rückwärtskompatibilität mit Nicht-HTML5-Browsern, ich möchte kein Javascript, und ich möchte kein externes CSS. Hier

ist ein Beispiel für die Art der Ausrichtung Ich möchte:

Quelle

2016-07-08 Vincent

Hast du 'transform: rotate' versucht? –

@RichardHamilton Ich weiß. Aber diese HTML ist nicht für eine Website. Ich schreibe ein offizielles Dokument für ein Komitee, und sie wollen HTML-Dateiformat (und keine externe Datei). – Vincent

@RichardHamilton Ich habe gerade ein Bild hochgeladen – Vincent

Edit: Habe gerade herausgefunden, dass du es counter-colockwise gedreht haben wolltest. In diesem Fall verwenden Sie -90deg

Um Text vertikal geschrieben zu haben, können Sie die transform: rotate(-90deg) Eigenschaft verwenden. Die Standardschriftart für th Elemente ist fett, daher müssen wir diese überschreiben und das Schriftgewicht normalisieren.

Sie sollten in der Lage sein, nur mit der Transformation zu entkommen, aber abhängig vom Browser müssen Sie möglicherweise Vendor Prefixes hinzufügen. Dies sollte das sein, was Sie suchen

<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: Verstanden mehr wie der Screenshot zu sehen, konnte aber nicht herausfinden, wie die Breite der Zellen zu ändern. Sieht so aus, als ob das das Beste ist, was ich jetzt tun kann.

Quelle

2016-07-08 15:58:08

Wie haben Sie die richtigen Grenzen? Wie man die korrekte Zellbreite (das gleiche Verhalten wie für die horizontalen) hat? – Vincent

Um die th nicht fett Änderung machen sie zu Standard td

für Linkslauf

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

}

Quelle

2016-07-08 15:58:00

Antwort

Verwandte Themen