表格表格对齐问题

Question

我在StackOverflow和其他地方的几个不同位置看到了这个问题，我尝试了大约十二种不同的解决方案，从两个单独的表到一系列复杂的类，再到手动设置像素宽度。

他们每个人似乎都有以下问题之一。 一切都会滚动，什么也不会滚动，或者Header字段将与表的其余部分完全不对齐。

这里的上下文是一个基本网页和带有单击“提交”按钮的表单（提交），单击该按钮，验证后，表单内容被发送到PHP程序，然后（此时）返回一个附加表，该表被添加到表格并显示更新按钮。 这个额外的表包含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;