我按照@koala_dev在这篇文章中的代码尝试锁定我的表格水平滚动的第一列。不幸的是,该代码对我的桌子没有影响。我想知道是否有人可以给我一些关于我做错了什么的指示,因为我是编程新手。
这是我的桌子: http://jsfiddle.net/mademoiselletse/bypbqboe/59/
这是我在JS中插入的代码(第121-133行):
$(function() {
var $tableClass = $('.table');
// Make a clone of our table
var $fixedColumn = $tableClass.clone().insertBefore($tableClass).addClass('fixed-column');
// Remove everything except for first column
$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
// Match the height of the rows to that of the original table's
$fixedColumn.find('tr').each(function(i, elem) {
$(this).height($tableClass.find('tr:eq(' + i + ')').height());
});
});
这是我插入的 CSS 属性(第 36-47 行):
.table-responsive > .fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
}
@media(min-width:768px) {
.table-responsive>.fixed-column {
display: none;
}
}
我唯一偏离 演示代码 的是我将
$('.table')
定义为 $tableClass
而不是 $table
,因为我之前已将 var $table
定义为 $('#table')
。非常感谢您的帮助!
只需将
position:sticky
添加到 th & td 第一个子。
th:first-child, td:first-child
{
position:sticky;
left:0px;
background-color:grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
<th>TIME</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>11:40 </td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
好的..删除所有的
js
代码,你可以使用一些CSS技巧来做到这一点,如下所示:
CSS
.table > thead:first-child > tr:first-child > th:first-child {
position: absolute;
display: inline-block;
background-color: red;
height: 100%;
}
.table > tbody > tr > td:first-child {
position: absolute;
display: inline-block;
background-color: red;
height: 100%;
}
.table > thead:first-child > tr:first-child > th:nth-child(2) {
padding-left: 40px;
}
.table > tbody > tr > td:nth-child(2) {
padding-left: 50px !important;
}
以下样式将创建第一列固定的条带表:
th:first-child, td:first-child{
position: sticky;
left: 0px;
z-index: 1;
}
tr:nth-child(odd) > td{
background-color: #ededed;
}
tr:nth-child(even) > td{
background-color: #e2e2e2;
}
tr:nth-child(odd) > th{
background-color: #d7d7d7;
}
$('#table')
表示您通过 id table
查找元素。
$('.table')
表示您按类 table
查找元素。
这些是您在 css 中使用的 CSS 选择器。
在您的情况下,您的表格有 id
table
,因此您可以使用 $('#table')
选择该表格。
并且您没有任何使用类
table
的 html 元素,因此当您选择使用 $('.table')
时,您将什么也得不到。