Javascript 修复引导表的第一列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30449054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fix First Column of a Bootstrap Table
提问by Vic
I followed @koala_dev's code in this postto try to lock the first column s my table scrolls horizontally. The code unfortunately has no effect on my table. I was wondering if anyone could give me some pointers on what I have done wrong as I am new to programming.
我在这篇文章中按照@koala_dev 的代码尝试锁定我的表水平滚动的第一列。不幸的是，代码对我的桌子没有影响。我想知道是否有人可以给我一些关于我做错了什么的指示，因为我是编程新手。
This is my table: http://jsfiddle.net/mademoiselletse/bypbqboe/59/
这是我的表：http: //jsfiddle.net/mademoiselletse/bypbqboe/59/
This is the code I inserted in JS (line 121-133):
这是我在 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());
});
});
This is the CSS properties (line 36-47) I have inserted:
这是我插入的 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;
}
}
The only thing I deviated from the demo codewas that I defined $('.table')as $tableClassinstead of $tablesince I have previously defined var $tableas $('#table'). Your help will be much appreciated!
我唯一偏离演示代码的是我定义$('.table')为$tableClass而不是$table因为我之前定义var $table为$('#table'). 您的帮助将不胜感激！
回答by Guruprasad Rao
Ok.. Remove all your jscode and you can do this with some CSS tricks as below:
好的.. 删除你所有的js代码，你可以使用一些 CSS 技巧来做到这一点，如下所示：
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;
}
回答by suhailvs
Just add position:stickyto th & td first-child.
只需添加position:sticky到th & td first-child。
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>回答by Dilip Kumar
$('#table')means your finding element by id table.
$('#table')表示您的查找元素 id table。
$('.table')means your finding elements by class table.
$('.table')表示您按 class 查找元素table。
These are the CSS selectors you used in css.
这些是您在 css 中使用的 CSS 选择器。
In your case, your table had id tableso you can select that table using $('#table').
在您的情况下，您的表具有 id，table因此您可以使用$('#table').
And you don't have any html elements using class table, so you'll get nothing when you select using $('.table').
并且您没有任何使用 class 的 html 元素table，因此当您选择 using 时，您将一无所获$('.table')。
回答by Jithin Pavithran
The following style will create a stripped table with the first column fixed:
以下样式将创建一个固定第一列的剥离表：
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;
}
