是否可以设置与宽度相同的高度(比例1:1)?
例
+----------+
| body |
| 1:3 |
| |
| +------+ |
| | div | |
| | 1:1 | |
| +------+ |
| |
| |
| |
| |
| |
+----------+
Run Code Online (Sandbox Code Playgroud)
CSS
div {
width: 80%;
height: same-as-width
}
Run Code Online (Sandbox Code Playgroud) 我希望创建一个表格,其中线程被冻结,并且thead中的标签以垂直方式定向.我的尝试在下面,但是由于我对css很新,因此这个实现存在许多问题.
关于我的解决方案,我不喜欢的一件事是,在您开始滚动表格之前,滚动条是隐藏的,因此有更多行要滚动到视图中并不明显.有没有办法让滚动条永久可见?
在上面的thead顶部还有一个大型景观,其中显示了聚会名称.我可以通过使用th.vertical中的值来扩大这个差距,但我无法消除它.如何强制thead仅与其包含的文本一样高?
最后,我希望thead中的垂直文本相对于列值居中,但我还没想出如何做到这一点.我怎么能这样做?
我也希望能够对任何专栏进行排序.
table thead tr {
display: block;
}
table th,
table td {
width: 75px; //fixed width
}
div.vertical {
margin-left: -100px;
position: absolute;
width: 210px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
/* Safari/Chrome */
-moz-transform: rotate(-90deg);
/* Firefox */
-o-transform: rotate(-90deg);
/* Opera */
-ms-transform: rotate(-90deg);
/* IE 9 */
}
th.vertical {
height: 60px;
line-height: 14px;
padding-bottom: 100px;
text-align: left;
}
table tbody {
display: block;
height: 500px;
overflow: auto;
}Run Code Online (Sandbox Code Playgroud)
<table class='vrt-header'>
<thead>
<tr>
<th></th> …Run Code Online (Sandbox Code Playgroud)