相关疑难解决方法(0)

高度等于动态宽度(CSS流体布局)

是否可以设置与宽度相同的高度(比例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)

html javascript css jquery responsive-design

414
推荐指数
8
解决办法
36万
查看次数

与冷冻标头的表与垂直的文本

我希望创建一个表格,其中线程被冻结,并且thead中的标签以垂直方式定向.我的尝试在下面,但是由于我对css很新,因此这个实现存在许多问题.

  1. 关于我的解决方案,我不喜欢的一件事是,在您开始滚动表格之前,滚动条是隐藏的,因此有更多行要滚动到视图中并不明显.有没有办法让滚动条永久可见?

  2. 在上面的thead顶部还有一个大型景观,其中显示了聚会名称.我可以通过使用th.vertical中的值来扩大这个差距,但我无法消除它.如何强制thead仅与其包含的文本一样高?

  3. 最后,我希望thead中的垂直文本相对于列值居中,但我还没想出如何做到这一点.我怎么能这样做?

  4. 我也希望能够对任何专栏进行排序.

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)

html css jquery html5 html-table

8
推荐指数
1
解决办法
411
查看次数

标签 统计

css ×2

html ×2

jquery ×2

html-table ×1

html5 ×1

javascript ×1

responsive-design ×1