0
我已經創建了一個帶有固定標題和可滾動主體的HTML表格。但是,當我調整瀏覽器窗口大小或放大或縮小瀏覽器表格對齊更改。即使瀏覽器窗口被調整大小或放大或縮小,我也想查看完整的表格。IE 11和IE 8中的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>
我很確定IE8不支持這種類型的任何內容,但是您可以爲IE11設置@media大小來執行您正在查找的內容。 –
我還沒有試過@media,但我已經更新了代碼,並且更改了小提琴......任何人都可以請再次檢查 –
好的,如果您今天下午沒有答案。當我下班時,我會做到這一點。添加小提琴幫助一噸! –