我用这个小提琴创作： - fiddle used to make this
但我使用list标签创建一个表并冻结前两列。第一列也是冻结，第二列也是第二列，但第二列的标题正在冻结。 它在chrome中工作得非常好，但在IE中却没有。
<div class="container" style="margin-top:30px;position:relative;">
<ul class="testTable" id="table">
<div class="testHeader">
<li class="testRow">
<span>ID</span>
<span>Name</span>
<span>Description</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
</li>
</div>
<div class="testBody">
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3 a jghasd kahsdk asd ad as das dsadasdasdasdasdas</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
</div>
</ul>
</div>
请帮助
答案 0 :(得分：0)
此前两列正在冻结click here - Fiddle。我在table-layout: fixed中添加了.testTable或在那里添加了一个选项，在.testHeader中将宽度替换为最大宽度，我们得到欲输出。在chrome，IE和firefox中运行良好。
有关table-layout: fixed的更多详情，请参阅此链接：click here
$(document).ready(function () {
$('.testBody').scroll(function (e) {
$('.testHeader').css("left", -$(".testBody").scrollLeft());
$('.testHeader span:first-child').css("left", $(".testBody").scrollLeft());
$('.testBody span:first-child').css("left", $(".testBody").scrollLeft());
$('.testHeader span:nth-child(2)').css("left", $(".testBody").scrollLeft());
$('.testBody span:nth-child(2)').css("left", $(".testBody").scrollLeft());
});
var resizeCol = function () {
//var tiw = $('.table-body .table').width();
//$('.table-head').width(tiw);
$('.testBody .testRow:first span').each(function (index, element) {
var w = $(this).css('width'),
i = $(this).index();
//$('.testHeader span:eq(' + i + ')').width(w);
$('.testHeader span:eq(' + i + ')').css('min-width', w );
});
}
resizeCol();
});body {
margin: 0;
padding: 0;
font-size: 14px;
}
#fixed {
position: fixed;
top: 0;
left: 0;
}
.testTable {
display: table;
margin: 0px;
padding: 0px;
position: relative;
width: 700px;
table-layout: fixed;
background-color: #fff;
overflow: hidden;
}
.testRow {
display: table-row;
}
.testRow > span {
list-style: none;
display: table-cell;
border: 1px solid #fff;
padding: 2px 6px;
}
.testHeader {
position: relative;
display: block; /*seperates the header from the body allowing it to be positioned*/
width: 700px;
overflow: visible;
/*display: table-header-group;*/
}
.testHeader .testRow {
border-bottom: 1px solid #dedede;
}
.testHeader span {
background: #F9F9F9;
min-width: 120px;
height: 32px;
font-family: Arial;
font-weight: bold;
border: 1px solid #fff;
}
.testHeader span:first-child {
position: relative;
z-index:99;
border: 1px solid #fff;
}
.testHeader span:nth-child(2) {
position: relative;
border: 1px solid #fff;
}
.testBody {
/*display: table-row-group;*/
position: relative;
display: block; /*seperates the tbody from the header*/
width: 700px;
height: 140px;
overflow: scroll;
}
.testBody .testRow:nth-child(odd) {
background: #fff;
}
.testBody .testRow:nth-child(odd) span:nth-child(1) {
background: #fff;
}
.testBody .testRow:nth-child(odd) span:nth-child(2) {
background: #fff;
}
.testBody .testRow:nth-child(even) {
background: #f9f9f9;
}
.testBody .testRow:nth-child(even) span:nth-child(1) {
background: #f9f9f9;
}
.testBody .testRow:nth-child(even) span:nth-child(2) {
background: #f9f9f9;
}
.testBody span {
min-width: 120px;
/*max-width:120px;*/
word-wrap:break-word;
border: 1px solid #fff;
}
.testBody span:first-child {
position: relative;
/*display: block;*/ /*seperates the first column from the tbody*/
height: 40px;
}
.testBody span:nth-child(2) {
position: relative;
height: 40px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="margin-top:30px;position:relative;">
<ul class="testTable" id="table">
<div class="testHeader">
<li class="testRow">
<span>ID</span>
<span>Name</span>
<span>Description</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
<span>Details</span>
</li>
</div>
<div class="testBody">
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3 a jghasd kahsdk asd ad as das dsadasdasdasdasdas</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
<li class="testRow">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
<span>5</span>
</li>
</div>
</ul>
</div>