javascript - 表单表对齐问题

Question

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

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

这里的上下文是一个基本网页和表单，点击按钮后有一个准备按钮(提交)，在验证后，表单内容被发送到一个 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;