我创建了一个带有固定标题和可滚动主体的HTML表格。但是当我调整浏览器窗口大小或放大或缩小浏览器时，表格对齐会发生变化。即使浏览器窗口调整大小或放大或缩小，我也希望查看完整的表格。
我需要它在IE 11和IE 8中工作
我尝试过谷歌的许多解决方案，但我无法让它发挥作用。
请帮忙，我非常需要解决这个问题的方法。
这是小提琴： 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>
答案 0 :(得分：0)
所以经过很多谷歌搜索并经历了stackoverflow中提到的许多解决方案之后，我终于得到了这个问题的解决方案，所以我在这里分享它，这里是代码，这对我有用：
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/ColorPrimary</item>
<item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
<!-- Customize your theme here. -->
</style>
</resources>