位置的新价值对我来说非常混乱..很多搜索结果都给出了javascript / jQuery(JavaScript框架)解决方案。
在底部的例子里我有一个{{1} } table
和thead
。
无论我无法达到什么样的结果。
欲望的结果是对桌子的粘性。粘性意味着当不在视图中元素是某种tbody
固定意味着它粘在你的屏幕上。 我做了什么尝试:
position:fixed
display: inline/block/inline-block;
(th元素是tr女巫内部的元素在thead元素内)position:sticky
等的混合; (财产显示价值)我只是找不到如何在firefox中实现这个粘性(支持)
任何解决方案??
(因为display:inline/block
仍然是一个实验性的API并且不应在生产站点中使用http://developer.mozilla.org/en/docs/Web/CSS/position)
position:sticky
table {
background-color: rgba(241, 31, 0, 0.3);
width: 100%;
}
thead {
background-color: rgba(241, 0, 241, 0.3);
position: -webkit-sticky;
position: sticky;
}
th {} tbody td:nth-child(2) {
height: 200px;
}
答案 0 :(得分:8)
Firefox 似乎不允许在表子元素上使用“粘性”。
解决方法是将table
设置为block
,然后thead
,tbody
,tfoot
设置为display:table;
,以便其中一个可以坚持下去。
不幸的是,这会将表格布局和拆分表分成几个表.. :(
你还需要设置粘性进入行动http://codepen.io/gc-nomade/pen/reoExq的coordonates。不是最好的:(
CSS基础就像:
table {
display: block;
}
thead {
position: sticky;
top: 0px; /* trigger sticky when reaches coordonates */
}
thead, tbody, tfoot {
display: table;
width: 100%;
}
table {
background-color: rgba(241, 31, 0, 0.3);
width: 100%;
margin-top: 1em;
position: static;
display: block;
}
thead {
display: table;
width: 100%;
background-color: rgba(241, 0, 241, 0.3);
position: sticky;
top: 0px;
/* trigger sticky when reaches coordonates */
}
tbody {
display: table;
width: 100%;
}
th {} tbody td:nth-child(2) {
height: 200px;
}
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
答案 1 :(得分:5)
另一种方法是使用css3翻译标题单元格。此方法确实需要javascript并且可以在所有现代浏览器中使用,但由于它会翻译表格单元格,因此出于某种原因(demo)
不会包含边框此外,此css必须在翻译的单元格中包含背景颜色
thead th,
caption {
background: #fff;
}
的jQuery
var $win = $(window),
$table = $('table'),
$thead = $table.children('thead'),
$tfoot = $table.children('tfoot'),
$caption = $table.children('caption'),
$cells = $thead.children().children().add($caption);
$win.on('scroll', function() {
var bottom = $table.position().top +
$table.height() -
$thead.height() -
($tfoot.height() || 0),
delta = $win.scrollTop() -
$thead.offset().top +
$caption.outerHeight(),
// include border thickness (minus 2)
vertPos = (delta < 0 || delta > bottom ? 0 : delta - 2);
$cells.css("transform", "translate(0px," + vertPos + "px)");
});
答案 2 :(得分:2)
更新2018年第一季度
position: sticky
现已登陆稳定的Firefox 59. The fiddle linked below现在也在Firefox中保持不变。
我知道你明确要求position: sticky
的Firefox兼容性,但不幸的是它在Firefox中的样式效果没有在内部表元素上定义:
引自https://developer.mozilla.org/en/docs/Web/CSS/position
position-relative on table - * - group,table-row,table-column,table-cell和table-caption元素的效果未定义。
'position:sticky'对表格元素的影响与'position:relative'相同。
话虽如此,position: sticky
即将登陆Chrome稳定版频道(在撰写本文时它位于金丝雀,there's a developer.google.com blog post about it)。它们的实现在thead
上运行良好,解决了我自己长期存在的粘性问题,因为当你需要调整表/单元格宽度时,所有其他解决方案都会失败。
I've created a fiddle测试粘性定位。在Firefox的所有频道上,这都没有效果。
我希望position: sticky
现在由于Chrome中更完整的实施而获得了跟踪,它将再次激起对sticky
缺乏内部表支持的讨论。
还有关于Firefox'Bugzilla的错误报告: https://bugzilla.mozilla.org/show_bug.cgi?id=975644