gpt4 book ai didi

javascript - 卡住列在 IE 中不起作用

转载 作者:行者123 更新时间:2023-11-28 04:15:23 25 4
gpt4 key购买 nike

我用这个 fiddle 来创建:- fiddle used to make this

但是我用list标签做了一个表格,卡住了前两列。第一列正在卡住,第二列也正在卡住,但不是第二列的标题正在卡住。它在 chrome 中工作得很好,但在 IE 中却不行

Click here for fiddle

<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>

请帮忙

最佳答案

此处前两列正在卡住 click here - Fiddle .我在 .testTable 中添加了 table-layout: fixed 或在那里添加了一个选项,将 .testHeader 中的 width 替换为 max-width ,我们得到需要输出。它在 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>

关于javascript - 卡住列在 IE 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42505512/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com