固定表格的顶行

Question

位置固定在这里没有帮助可能是我做错了什么。

第一行的输入框在滚动时应保持冻结状态。我知道之前已经回答过这个问题，但没有一个解决方案有效。

http://jsfiddle.net/roshanjsachan/r8WDb/

.table{
text-align:center;
overflow: auto;
    table{
        width: 95%;
        margin: auto;
        margin-top: 5px;
         }
    }
.table_scroll
 {
display:block;
height:500px;
overflow-y:scroll;
 }

<div class="table">
<table class="table_scroll">
<tbody>
<tr class="main_tr">
 <th class="input_col"><input title="empno" placeholder="empno" type="text" class="col_data" id="empno" autocomplete="off"></th>
 <th class="input_col"><input title="name" placeholder="name" type="text" class="col_data" id="name" autocomplete="off"></th>
 <th class="input_col"><input title="job" placeholder="job" type="text" class="col_data" id="job" autocomplete="off"></th>
 <th class="input_col"><input title="boss" placeholder="boss" type="text" class="col_data" id="boss" autocomplete="off"></th>
 <th class="input_col"><input title="hiredate" placeholder="hiredate" type="text" class="col_data" id="hiredate" autocomplete="off"></th>
 <th class="input_col"><input title="salary" placeholder="salary" type="text" class="col_data" id="salary" autocomplete="off"></th>
 <th class="input_col"><input title="comm" placeholder="comm" type="text" class="col_data" id="comm" autocomplete="off"></th>
 <th class="input_col"><input title="deptno" placeholder="deptno" type="text" class="col_data" id="deptno" autocomplete="off"></th>
</tr>

<tr id="row1" class="remove table_row">
  <td>7369</td>
  <td>SMITH</td>
  <td>CLERK</td>
  <td>7902</td>
  <td>1980-12-17</td>
  <td>800.00</td>
  <td></td>
  <td>20</td>
</tr>
<tr id="row2" class="remove table_row">
  <td>7370</td>
  <td>ALLEN</td>
  <td>CLERK</td>
  <td>7902</td>
  <td>1980-12-17</td>
  <td>800.00</td>
  <td></td>
  <td>20</td>
</tr>
</tbody>
</table>
</div>

Answer 1

注意：此答案仅适用于垂直滚动并假定表格将水平放置。如果你需要水平滚动，你需要做更多的 jQuery 来监听滚动事件和更新样式。

问题 1：列宽变化

选项 1：在 CSS 中设置 table-layout:fixed 并预定义每列的宽度。

选项 2：使用 jQuery 测量列，然后应用 table-layout:fixed 并设置每列的宽度。

var $table = $('table');
var $tbody = $table.find('tbody');
var $ths = $table.find('th');
var $tds =  $table.find('tbody tr:first-child td'); //only need the first row
var widths = [];


//Measure the widths
$ths.each(function(i, cell) {
    var $cell = $(cell);
    widths.push(
        cell.clientWidth //don't use jquery's width() it's inaccurate in cases with bordercollapse.
        - parseFloat($cell.css('padding-right'))
        - parseFloat($cell.css('padding-left'))
    );
});

//Freeze the cells widths
$ths.each(function(i, cell) {
    $(cell).width(widths[i]);
});
$tds.each(function(i, cell) {
    $(cell).width(widths[i]);
});

问题 2：滚动

选项 1：将 table、tbody 和 thead 设置为 display:block。将thead设置为位置：绝对。将 tbody 设置为滚动。

table.freeze  {
    position:relative;
    display:block;
    table-layout:fixed;
}

table.freeze thead {
    position: absolute;
    left:0;
    top:0;
    display:block;
    background-color:#fff;
}
table.freeze tbody {
    height:200px;
    overflow-y:auto;
    overflow-x:hide;
    display:block;
}

选项 2：将 thead 克隆到单独的表中。将该表绝对放置在另一个包装器中。这种方法可能会使其他行为更容易，例如页面滚动或添加水平滚动。

小提琴 这是一个工作示例。请注意，您需要确保结果窗格的宽度足以查看整个表格。

http://jsfiddle.net/shindigg/232Vv/1/

Answer 2

检查此fiddle 你必须添加

tr.table_row td {
    display:table-cell;   
}

Answer 3

尝试改变你的 css：

.table_scroll
 {
display:block;
height:500px;
overflow-y:auto;
 }

演示：http://jsfiddle.net/r8WDb/6/