表格對齊問題

Question

我已經在StackOverflow和其他地方的幾個不同位置看到了這個問題，我已經嘗試過幾種不同的解決方案，從兩個單獨的表格到複雜的一系列類別，手動設置像素寬度。

他們每個人似乎都有下列問題之一。一切都會滾動，沒有東西會滾動，或者標題字段與表格的其餘部分完全不一致。

這裏的上下文是一個基本的網頁和表單，點擊按鈕後有一個準備好的按鈕（提交），驗證後，表單內容被髮送到一個PHP程序，然後（此時）返回一個附加表被添加到窗體並顯示Update按鈕。這個額外的表格包含100個重複的條目，所以我需要讓它滾動表格的內容，但保留標題，以便用戶仍然知道什麼領域與什麼相關。

這裏是什麼它目前看起來像

截圖這裏是產生它的代碼。 更新，以生成HTML而不是PHP - 減少到一行簡潔

<section class=''> 
    <div class='container'> 
    <table id='list-table' class='main-list input-capable-list ui-widget-content' cellspacing='2' > 
     <thead class='fixedHeader ui-widget-content'> 
       <tr> 
         <th><b>From City</b><div><b>From City</b></div></th> 
         <th><b>From State</b><div><b>From State</b></div></th> 
         <th></th> 
         <th><b>To City</b><div><b>To City</b></div></th> 
         <th><b>To State</b><div><b>To State</b></div></th> 
         <th><b>RPM</b><div><b>RPM</b></div></th> 
         <th><b>Flat</b><div><b>Flat</b></div></th> 
         <th><b>MIN</b><div><b>MIN</b></div></th> 
         <th><b>Fuel(Y/N)</b><div><b>Fuel(Y/N)</b></div></th> 
         <th><b>Comments</b><div><b>Comments</b></div></th>          </tr> 
       </thead> 
       <tbody> 
        <tr> 
        <td><input id='FCITY0' class='entry city' type='text' name='FCITY0' size='30' maxlength='30' /></td> 
          <td width='30'><input id='FSTATE0' class='entry state' type='text' name='FSTATE0' title='Please enter a valid State Code' size='2' maxlength='2' /></td> 
          <td width='500'></td> 
          <td width='50'><input id='TCITY0' class='entry city' type='text' name='TCITY0' size='30' maxlength='30' /></td> 
          <td width='30'><input id='TSTATE0' class='entry state' type='text' name='TSTATE0' title='Please enter a valid State Code' size='2' maxlength='2' /></td> 
          <td width='50'><input id='RPM0' class='entryNum' type='text' name='RPM0' size='4' maxlength='7' /></td> 
          <td width='50'><input id='FLAT0' class='entryNum' type='text' name='FLAT0' size='6' maxlength='12' /></td> 
          <td width='50'><input id='MIN0' class='entryNum' type='text' name='MIN0' size='5' maxlength='12' /></td> 
          <td width='50'><input id='FUEL0' class='entry fuel' type='text' name='FUEL0' size='1' maxlength='1' /></td> 
          <td width='200'><textarea id='COMNTS0' name='COMNTS0' maxlength='200' rows='2' cols='30'></textarea></td> 
        </tr> 
        </tbody> 
       </table> 
       </div> 
      </section> 
<style>section { 
         position: relative; 
         border: 1px solid #000; 
         padding-top: 37px; 
         } 
         section.positioned { 
         position: absolute; 
         top:100px; 
         left:100px; 
         width:800px; 
         box-shadow: 0 0 15px #333; 
         } 
         .container { 
         overflow-y: auto; 
         height: 440px; 
         } 
         table { 
         border-spacing: 0; 
         width:100%; 
         } 
         td + td { 
         border-left:1px solid #eee; 
         } 
         td, th { 
         border-bottom:1px solid #eee; 
         padding: 10px 25px; 
         } 
         th { 
         height: 0; 
         line-height: 0; 
         padding-top: 0; 
         padding-bottom: 0; 
         color: transparent; 
         border: none; 
         white-space: nowrap; 
         } 
         th div{ 
         position: absolute; 
         background: transparent; 
         padding: 9px 25px; 
         top: 0; 
         margin-left: -25px; 
         line-height: normal; 
         border-left: 1px solid #800; 
         } 
         th:first-child div{ 
         border: none; 
         } 


       </style> 

我接受任何和所有的建議和可能的解決方案，但請記住，我已經嘗試了許多明顯的解決方案，到目前爲止，這是我所做的最接近我做的事情。

請注意，下方列出的第二組標題位於頂部，並向上滾動表格數據的其餘部分。這個想法是由它重疊的div（頂部的標題）。請參閱此示例：https://jsfiddle.net/dPixie/byB9d/3/light/

Answer 1

修復了要在其中顯示錶的容器的高度，然後將overflow: scroll應用於該容器。

或

可以使頭粘在上面用下面的代碼

position: fixed; 
width: 100%; 
top: 0;