2015-06-09 72 views
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> 

+0

我很確定IE8不支持這種類型的任何內容,但是您可以爲IE11設置@media大小來執行您正在查找的內容。 –

+0

我還沒有試過@media,但我已經更新了代碼,並且更改了小提琴......任何人都可以請再次檢查 –

+0

好的,如果您今天下午沒有答案。當我下班時,我會做到這一點。添加小提琴幫助一噸! –

回答

0

所以很多的谷歌搜索後,通過在計算器中提到許多解決方案去,我終於得到了解決對這個問題,所以我在這裏分享它,這裏是代碼,這是我的工作:

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