当它是垂直 table header 时,如何删除它的填充?

How can I remove the padding of a th when it's a vertical table header?

我需要建立类似日历的东西,但要持续一周。问题是我想要一些 垂直 header 而有些不是。当我制作垂直 header 时,会有一些额外的填充。我无法删除它,而且我真的找不到任何解决方案。

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

也许这不是您想要的,但是,如果您不旋转整个单元格,而是只旋转文本怎么办?我想它看起来会更好,即使我更喜欢文本是水平的,或者旋转几度而不是 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>