創建固定的頁眉表html

我正在創建一個固定的頁眉表，但頁眉和數據似乎沒有對齊。該表是動態創建的。下面是生成的html的示例 -創建固定的頁眉表html

您認爲我應該怎麼做？

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

    <title></title> 
    <style> 
     /*spreadsheet*/ 

     .row:nth-child(odd) 
     { 
      background: rgba(0,0,0,0.05); 
     } 
     /* Similarly we can define another rule for even */ 

     .bodyTable td 
     { 
      white-space: normal; /*text-overflow: ellipsis;*/ 
      overflow: hidden; 
      word-spacing: normal; 
      font-family: Sans-Serif; 
      font-size: 14px; 
      text-align: right; 
     } 

     .bodyTable tr 
     { 
      height: 20px; 
     } 

     .bodyTable tr:hover 
     { 
      background-color: rgba(0,0,0,0.3); 
     } 

     .headerTable 
     { 
      text-align: justify; 
      vertical-align: middle; 
      word-spacing: normal; 
      border-spacing: 0px;    
      border-style: solid; 
      caption-side: top; 
      word-wrap:break-word; 
      border-collapse: collapse; 
      font-family: Sans-Serif; 
      font-size: 10px; 
     } 

     .th 
     { 
      background-color: Red; 
     } 

     .scroll 
     { 
      overflow: auto; 
     } 
    </style> 
</head> 
<body> 
    <div id="tableTag"> 
     <table width="1903px"> 
      <tr> 
       <td> 
        <table class="headerTable" width="1878px"> 
         <tr> 
          <th> 
           sample1 
          </th> 
          <th> 
           sample2 
          </th> 
          <th> 
           sample3 
          </th> 
          <th> 
           sample 
          </th> 
          <th> 
           testsample 
          </th> 
          <th> 
           column2 
          </th> 
          <th> 
           column3 
          </th> 
          <th> 
           column4 
          </th> 

         </tr> 
        </table> 
       </td> 
      </tr> 
      <tr> 
       <td style="text-align: center;"> 
        <div class="scroll" width="1903px" style="height: 200px;"> 
         <table class="bodyTable" border="0" width="1878px" height="200px" style="table-layout: fixed"> 
          <tbody> 
           <tr class="row"> 
            <td> 
             54.29204 
            </td> 
            <td> 
             76.806827 
            </td> 
            <td> 
             31.127742 
            </td> 
            <td> 
             -0.409866 
            </td> 
            <td> 
             2.965601 
            </td> 
            <td> 
             6.696099 
            </td> 
            <td> 
             - 0.947771 
            </td> 
            <td> 
             9.713368 
            </td> 

           </tr> 
           <tr class="row"> 
            <td> 
             72.082179 
            </td> 
            <td> 
             68.104432 
            </td> 
            <td> 
             16.588382 
            </td> 
            <td> 
             - 0.564589 
            </td> 
            <td> 
             5.759212 
            </td> 
            <td> 
             7.916862 
            </td> 
            <td> 
             - 0.706712 
            </td> 
            <td> 
             3.840213 
            </td> 

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

來源

2014-09-22 user476566

這是因爲表頭是saperate臺（次）。你已經把主表元素中或內嵌式打法取得成功這一點。 – 2014-09-22 23:30:07

如果我把它們放在主表內，我不認爲它會給我提供固定的樣式標題 – user476566 2014-09-22 23:31:55

http://www.fixedheadertable.com – 2014-09-22 23:47:44

一個簡單的解決方案，你可以做的是，如果知道每一個表將有8列在裏面（就像你在你的示例代碼中有），可以設置標題，表列和身體表列到相同的寬度，以便它們正確對齊。在這種情況下，使用8列可以使用width:12.5%，這樣每列的寬度都是相同的。 CSS代碼會是這個樣子：

.headerTable th { 
    background-color: lightblue; 
    width:12.5%; 
} 
.bodyTable td { 
    white-space: normal; /*text-overflow: ellipsis;*/ 
    overflow: hidden; 
    word-spacing: normal; 
    font-family: Sans-Serif; 
    font-size: 14px; 
    text-align: right; 
    width:12.5%; 
}

來源

2014-09-22 23:47:41 crazymatt

創建固定的頁眉表html

回答

相關問題