当它是垂直 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 <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 <i class="fa fa-caret-down"></i></a>
</th>
<th class="linkTableHeader">
<a href="#">Mercredi <i class="fa fa-caret-down"></i></a>
</th>
<th class="linkTableHeader">
<a href="#">Jeudi <i class="fa fa-caret-down"></i></a>
</th>
<th class="linkTableHeader">
<a href="#">Vendredi <i class="fa fa-caret-down"></i></a>
</th>
<th class="linkTableHeader">
<a href="#">Samedi <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 <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 <i class="fa fa-caret-down"></i></a></div>
</th>
<th class="linkTableHeader">
<div class="rotated">
<a href="#">Mercredi <i class="fa fa-caret-down"></i></a></div>
</th>
<th class="linkTableHeader">
<div class="rotated">
<a href="#">Jeudi <i class="fa fa-caret-down"></i></a></div>
</th>
<th class="linkTableHeader">
<div class="rotated">
<a href="#">Vendredi <i class="fa fa-caret-down"></i></a></div>
</th>
<th class="linkTableHeader"><div class="rotated">
<a href="#">Samedi <i class="fa fa-caret-down"></i></a></div>
</th>
</tr>
</thead>
我需要建立类似日历的东西,但要持续一周。问题是我想要一些 垂直 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 <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 <i class="fa fa-caret-down"></i></a>
</th>
<th class="linkTableHeader">
<a href="#">Mercredi <i class="fa fa-caret-down"></i></a>
</th>
<th class="linkTableHeader">
<a href="#">Jeudi <i class="fa fa-caret-down"></i></a>
</th>
<th class="linkTableHeader">
<a href="#">Vendredi <i class="fa fa-caret-down"></i></a>
</th>
<th class="linkTableHeader">
<a href="#">Samedi <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 <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 <i class="fa fa-caret-down"></i></a></div>
</th>
<th class="linkTableHeader">
<div class="rotated">
<a href="#">Mercredi <i class="fa fa-caret-down"></i></a></div>
</th>
<th class="linkTableHeader">
<div class="rotated">
<a href="#">Jeudi <i class="fa fa-caret-down"></i></a></div>
</th>
<th class="linkTableHeader">
<div class="rotated">
<a href="#">Vendredi <i class="fa fa-caret-down"></i></a></div>
</th>
<th class="linkTableHeader"><div class="rotated">
<a href="#">Samedi <i class="fa fa-caret-down"></i></a></div>
</th>
</tr>
</thead>