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

检查fiddle 你必须添加

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

Answer 2

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

问题1：列宽更改

选项1：在CSS set table-layout中：固定并预定义每列的宽度。

选项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：设置表格，tbody和thead以显示：block。将thead设置为position：absolute。设置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 3

尝试改变你的css：

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

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

修复了表格的顶行

3 个答案: