Ошибка выравнивания таблицы форм

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;