Wie kann ich das Padding eines Th entfernen, wenn es sich um einen vertikalen Tabellenkopf handelt?

Question

Ich muss so etwas wie einen Kalender aber für eine Woche bauen. Das Problem ist, dass ich einige vertikale Header und einige nicht haben möchte. Wenn ich vertikalen Header mache, gibt es einige zusätzliche Auffüllen. Ich kann es nicht entfernen und ich fand wirklich nirgends Lösungen.

.linkTableHeader { 
 
    white-space:nowrap; 
 
    text-align: center; 
 
    table-layout: fixed; 
 
    width: 5em;  
 
    transform: rotate(-90deg); 
 
} 
 
.tableHeader { 
 
    width: 1em; 
 
    text-align: center; 
 
}

<table border="1"> 
 
       <thead> 
 
        <tr style="height: 7em;"> 
 
         <th> 
 
          Elèves 
 
         </th> 
 
         <th class="linkTableHeader"> 
 
          <a href="#">Lundi&nbsp;<i class="fa fa-caret-down"></i></a> 
 
         </th> 
 
         <th class="tableHeader"> 
 
          1 
 
         </th> 
 
         <th class="tableHeader"> 
 
          2 
 
         </th> 
 
         <th class="tableHeader"> 
 
          3 
 
         </th> 
 
         <th class="tableHeader"> 
 
          4 
 
         </th> 
 
         <th class="tableHeader"> 
 
          5 
 
         </th> 
 
         <th class="tableHeader"> 
 
          6 
 
         </th> 
 
         <th class="tableHeader"> 
 
          7 
 
         </th> 
 
         <th class="linkTableHeader"> 
 
          <a href="#">Mardi&nbsp;<i class="fa fa-caret-down"></i></a> 
 
         </th>    
 
         <th class="linkTableHeader"> 
 
          <a href="#">Mercredi&nbsp;<i class="fa fa-caret-down"></i></a> 
 
         </th> 
 
         <th class="linkTableHeader"> 
 
          <a href="#">Jeudi&nbsp;<i class="fa fa-caret-down"></i></a> 
 
         </th> 
 
         <th class="linkTableHeader"> 
 
          <a href="#">Vendredi&nbsp;<i class="fa fa-caret-down"></i></a> 
 
         </th> 
 
         <th class="linkTableHeader"> 
 
          <a href="#">Samedi&nbsp;<i class="fa fa-caret-down"></i></a> 
 
         </th> 
 
        </tr> 
 
       </thead>

Answer 1

Vielleicht ist es nicht das, was Sie wollen, aber was ist, wenn stattdessen die gesamten Zellen von rotierenden, können Sie nur den Text drehen? Es wäre besser aussehen Ich nehme an, auch wenn ich den Text ein paar Grad horizontal bevorzugen würden, oder gedreht und nicht 90.

table{ 
 
    width: 700px; 
 
    table-layout: fixed; 
 
} 
 
.linkTableHeader { 
 
    white-space:nowrap; 
 
    text-align: center; 
 
} 
 
.tableHeader { 
 
    text-align: center; 
 
} 
 
.rotated { 
 
    transform: rotate(-90deg); 
 
}

<table border="1"> 
 
       <thead> 
 
        <tr style="height: 7em;"> 
 
         <th> 
 
          Elèves 
 
         </th> 
 
         <th class="linkTableHeader"> 
 
          <div class="rotated"><a href="#">Lundi&nbsp;<i class="fa fa-caret-down"></i></a></div> 
 
         </th> 
 
         <th class="tableHeader"> 
 
          1 
 
         </th> 
 
         <th class="tableHeader"> 
 
          2 
 
         </th> 
 
         <th class="tableHeader"> 
 
          3 
 
         </th> 
 
         <th class="tableHeader"> 
 
          4 
 
         </th> 
 
         <th class="tableHeader"> 
 
          5 
 
         </th> 
 
         <th class="tableHeader"> 
 
          6 
 
         </th> 
 
         <th class="tableHeader"> 
 
          7 
 
         </th> 
 
         <th class="linkTableHeader"> 
 
         <div class="rotated"> 
 
          <a href="#">Mardi&nbsp;<i class="fa fa-caret-down"></i></a></div> 
 
         </th>    
 
         <th class="linkTableHeader"> 
 
         <div class="rotated"> 
 
          <a href="#">Mercredi&nbsp;<i class="fa fa-caret-down"></i></a></div> 
 
         </th> 
 
         <th class="linkTableHeader"> 
 
         <div class="rotated"> 
 
          <a href="#">Jeudi&nbsp;<i class="fa fa-caret-down"></i></a></div> 
 
         </th> 
 
         <th class="linkTableHeader"> 
 
         <div class="rotated"> 
 
          <a href="#">Vendredi&nbsp;<i class="fa fa-caret-down"></i></a></div> 
 
         </th> 
 
         <th class="linkTableHeader"><div class="rotated"> 
 
          <a href="#">Samedi&nbsp;<i class="fa fa-caret-down"></i></a></div> 
 
         </th> 
 
        </tr> 
 
       </thead>