html - 即使在水平滚动上也保持表头居中
问题描述
我正在尝试使表格标题文本应该始终居中,即使在滚动时也保持水平居中。这可能与 CSS 吗?此外,表格上方内容的高度是动态的,所以我宁愿不考虑绝对定位的解决方案。
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 2000px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table>
<tr>
<th colspan="3" style="text-align: center;">Should Always Be Centered</th>
</tr>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
解决方案
需要注意的是,header__text
您需要使用左属性百分比。
就“应该始终居中”的线宽而言,45% 恰好是最好的“神奇数字”
因此,如果您的行中的字数较少,则必须增加此百分比值,反之亦然。
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 2000px;
}
.header {
width: 2000px;
background: red;
position: sticky;
top: 0;
}
.header__text {
position: sticky;
left: 45%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<table>
<tr>
<th class="header" colspan="3">
<span class="header__text">Should Always Be Centered</span>
</th>
</tr>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
推荐阅读
- java - 如何在托管的 Jenkins 实例上运行 Selenium WebDriver
- selenium - 寻找硒元素
- javascript - Param Redux 数据未正确填充到存储中
- python - 什么是分类服装图像的最佳优化器
- security - Openvas 设置不会连接到 dl.greenbone.net
- c++ - 无法加载源:不支持 SourceRequest
- python - FASTApi 身份验证注入
- java - 如何使用列“分组”而不显示它?
- r - 如何在代码折叠中使用自定义 rmdformat
- apache-spark - 如何为两个数据帧创建分区,而几个分区可以位于 Spark 上的同一实例/机器上?