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;

表格对齐问题

1 个答案: