个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
24
4
下表包含一个粘性表格标题，但我希望旋转一些表格标题单元格。这里的问题是，目前这些表格标题单元格( <th> 元素)将出现在屏幕或表格标题本身( <thead> 元素)之外。
是否可以制作带有旋转标题单元格的粘性表格标题？
带有粘性标题的工作表(可选示例代码):
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
.sticky-table thead tr th {
position: sticky;
top: -1px;
background-color: #fff;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm sticky-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>带有粘性标题的损坏表格(这段代码包含我正在尝试做的事情):
将 style="transform: rotate(-90deg); text-align: center;" 添加到 <th> 元素。
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
.sticky-table thead tr th {
position: sticky;
top: -1px;
background-color: #fff;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm sticky-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" style="transform: rotate(-90deg); text-align: center;">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>(要重现该问题，请尝试向下滚动并查看结果。表头将不会完全可见，并且在将 background-color 分配给所有 <th> 元素时，它也会出现在 <thead> 之外)。
旋转的原因是因为我想通过更改表格标题方向来节省表格宽度的一些空间。
我是否需要为这种行为编写一些 JavaScript，或者纯 CSS 也能解决这个问题？
最佳答案
您可以不将文本作为一个 block 旋转，而是让文本以从上到下而不是从左到右的方向书写:
(感谢 Константин Ван 的启发)
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
.sticky-table thead tr th {
position: sticky;
top: -1px;
background-color: #fff;
}
.sticky-table thead tr th.vertical {
-webkit-text-orientation: upright;
-webkit-writing-mode: vertical-rl;
text-orientation: upright;
writing-mode: vertical-rl;
text-align: center;
}
.sticky-table thead tr th.vertical span.chromeFix
{
text-orientation: upright;
writing-mode: vertical-rl;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm sticky-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" class="vertical"><span class="chromeFix">First</span></th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>在 Edge 中检查后，这可能不是最佳解决方案，因为它与所有浏览器都不兼容。
感谢Turnip指出如果您将文本包装在 span 或类似的东西中，这仅在 Chrome 中有效。
关于javascript - 是否可以制作带有旋转标题单元格的粘性表格标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56885862/
24
4
0
我已经尝试在我的 CSS 中添加一个元素来删除每三个 div 的 margin-right。不过，似乎只是出于某种原因影响了第 3 次和第 7 次。需要它在第 3、6、9 等日工作... CSS .s
如何使 div/input 闪烁或“脉冲”？例如，假设表单字段输入了无效值？ 最佳答案 使用 CSS3 类似 on this page ，您可以将脉冲效果添加到名为 error 的类中: @-webk
我目前正在尝试构建一个简单的 wireframe来自 lattice 的情节包，但由沿 y 轴的数百个点组成。这导致绘图被线框网格淹没，您看到的只是一个黑色块。我知道我可以用 col=FALSE 完全
在知道 parent>div CSS 选择器在 IE 中无法识别后，我重新编码我的 CSS 样式，例如: div#bodyMain div#paneLeft>div{/*styles here*/}
我有两个 div，一个在另一个里面。当我将鼠标悬停 到最外面的那个时，我想改变它的颜色，没问题。但是，当我将鼠标悬停 到内部时，我只想更改它的颜色。这可能吗？换句话说，当 将鼠标悬停到内部 div 上
我需要展示这样的东西 有人可以帮忙吗？我可以实现以下输出 我正在使用以下代码:: GridView.builder( scrollDirection: Axis.vertical,
当 Bottom Sheet 像 Android 键盘一样打开时，是否有任何方法可以手动上推布局( ScrollView 或回收器 View 或整个 Activity )？或者你可以说我想以 Bott
我有以下代码，用于使用纯 HTML 和 CSS 显示翻转。当您将鼠标悬停在文本上时，它会更改左右图像。 在我测试的所有浏览器中都运行良好，Safari 4 除外。据我收集的信息，Safari 4 支持
我构建了某种 CMS，但在使用 TinyMCE 和 Bootstrap 时遇到了一些问题。 我有一个页面，其中概述了一个 div，如果用户单击该 div，他们可以从模态中选择图像。该图像被插入到一个
出于某种原因，当我设置一个过渡时，当我的鼠标悬停在一个元素上时，背景会改变颜色，它只适用于一个元素，但它们都共享同一个类？任何帮助我的 CSS .outer_ad { position:rel
好吧，这真的很愚蠢。我不知道 Android Studio 中的调试监视框架发生了什么。我有 1.5.1 的工作室。 是否有一些来自 intellij 的 secret 知识来展示它。 最佳答案 与以
我有这个标记: some code > 我正在尝试获取此布局: 注意:上一个和下一个按钮靠近#player 我正在尝试这样: .nextBtn{
网站:http://avuedesigns.com/index 首页有 6 个菜单项。我希望每件元素在您经过时都有自己的颜色。 这是当您将鼠标悬停在 div 上时将所有内容更改为白色的行 li#hom
我需要在 index.php 文件中显示它，但没有任何效果。我所有的文章都没有正确定位。我将其用作代码: 最佳答案 您可以首先检查您
我是一名优秀的程序员,十分优秀！