表格对齐问题

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;