gpt4 book ai didi

IE 11 和 IE 8 中的 Html 表格对齐问题

转载 作者:行者123 更新时间:2023-11-28 07:45:20 25 4
gpt4 key购买 nike

我创建了一个带有固定标题和可滚动正文的 HTML 表格。但是当我调整浏览器窗口大小时或放大或缩小浏览器时,表格对齐方式会发生变化。即使调整浏览器窗口的大小、放大或缩小,我也想查看完整的表格。

我需要它在 IE 11 和 IE 8 中工作

我已经尝试了很多来自谷歌的解决方案,但我无法让它发挥作用。

请帮忙,我非常需要这个问题的解决方案。

这是 fiddle : Scrollable Table

<html>
<head>
<style>
div td{
text-align: center;
}
</style>
<script language="Javascript">
window.onload = init;
window.onresize = init;

function init() {
var eTable = document.getElementById("headers");
if (eTable != null){

eTable.style.width = document.getElementById('data').offsetWidth;
document.getElementById('th1').style.width = document.getElementById('td1').offsetWidth;
document.getElementById('th2').style.width = document.getElementById('td2').offsetWidth;
document.getElementById('th3').style.width = document.getElementById('td3').offsetWidth;
document.getElementById('th4').style.width = document.getElementById('td4').offsetWidth;
document.getElementById('th5').style.width = document.getElementById('td5').offsetWidth;
document.getElementById('th6').style.width = document.getElementById('td6').offsetWidth;
document.getElementById('th7').style.width = document.getElementById('td7').offsetWidth;
document.getElementById('th8').style.width = document.getElementById('td8').offsetWidth;
document.getElementById('th9').style.width = document.getElementById('td9').offsetWidth;
} }

</head>
<body>
<table id="headers" width="100%">
<thead>
<tr bgcolor="blue">
<th align="center" id="th1">Head 1<br></th>
<th align="center" id="th2">Head 2<br>
</th>
<th align="center" id="th3">
Head 3<br>
</th>
<th align="center" id="th4">
Head 4<br>
</th>
<th align="center" id="th5">
Head 5<br>
</th>
<th align="center" id="th6">
Head 6<br>
</th>
<th align="center" id="th7">
Head 7<br>
</th>
<th align="center" id="th8">
Head 8<br>
</th>
<th align="center" id="th9">
Head 9<br>
</th>
</tr></thead>
</table>
<div style="height: 275px; overflow-y: auto;">

<table id="data" width="100%">


<tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr>
<tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr> <tr bgcolor="#EEEEEE">
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>
<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>
</tr>

</table>
</div>
</body>

最佳答案

所以经过大量的谷歌搜索并经历了 stackoverflow 中提到的许多解决方案,我终于找到了解决这个问题的方法,所以我在这里分享它,这是对我有用的代码:

<html>
<head>
<style>
#table-wrapper {
position:absolute;
left: 30px;
top: 50px;
}
#table-scroll {
height:250px;
overflow-y: auto;
overflow-x: hidden;
}

#table-scroll table {
height: 250px;
}
#table-wrapper table {
width: 1300px;
display: block;
}

#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
border:1px solid red;
}

#table-wrapper table thead th{
background-color: orange;
height: 25px;
}

#table-wrapper table tbody td{
background-color: grey;
}
</style>

</head>
<body>
<div id="table-wrapper">


<table id="headers">
<thead><tr>
<th align="center" id="th1" width = "9%;">
Head 1<br>
</th>
<th align="center" id="th2" width = "28%;">
Head 2<br>
</th>
<th align="center" id="th3" width = "9%;">
Head is longer<br>
</th>
<th id="th4" width = "9%;">
Head is even more lengthy than others<br>
</th>

</th>
<th align="center" id="th5" width = "13%;" >
Head 5<br>
</th>
<th align="center" id="th6" width = "8%;">
Head 6<br>
</th>
<th align="center" id="th7" width = "8%;">
Head 7<br>
</th>
<th align="center" id="th8" width = "8%;">
Head 8<br>
</th>
<th align="center" id="th9" width = "8%;">
Head 9<br>
</th>
</tr></thead>
</table>

<div id="table-scroll">

<table id="data">

<tbody>

<tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr><tr >
<td id="td1" width="9%">column 1

</td>
<td id="td2" width="28%">
COlumn 2
</td>
<td id="td3" width="9%">
Column 3
</td>
<td id="td4" width="9%">
Column 4
</td>

<td id="td5" width="13%">
Column 5
</td>
<td id="td6" width="8%">
Column 6
</td>
<td id="td7" width="8%">
Column 7
</td>
<td id="td8" width="8%">
Column 8
</td>
<td id="td9" width="8%">
Column 9
</td>

</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

关于IE 11 和 IE 8 中的 Html 表格对齐问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30725112/

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