Раздражающая горизонтальная полоса прокрутки

Я пытаюсь создать страницу для прокрутки только содержимого таблицы, т. Е. Заголовок таблицы не перемещается с содержимым.Раздражающая горизонтальная полоса прокрутки

Он выглядит хорошо, за исключением того, что он имеет раздражающую горизонтальную полосу прокрутки (во всех современных браузерах).

код здесь

div.title { 
 
    position: absolute; 
 
    top: 0px; 
 
    height: 97px; 
 
    width:100%; 
 
} 
 
div.tableHeader { 
 
    position: absolute; 
 
    top: 98px; 
 
    height: 23px; 
 
    overflow-y: scroll; 
 
    width:100%; 
 
} 
 
div.tableBody { 
 
    position: absolute; 
 
    top: 128px; 
 
    bottom: 0px; 
 
    width:100%; 
 
    overflow-x: auto; 
 
    overflow-y: scroll; 
 
} 
 
table.fixedHeader { 
 
    width: 100%; 
 
    text-align: left; 
 
} 
 
table.fixedHeader thead { 
 
    height: 21px; 
 
    background-color: #BFC2CC; 
 
} 
 
table.fixedHeader tr:nth-child(even) { 
 
    background-color: #ddd; 
 
} 
 
table.fixedHeader th:nth-child(1), table.fixedHeader td:nth-child(1) { 
 
    width: 250px; 
 
} 
 
table.fixedHeader th:nth-child(2), table.fixedHeader td:nth-child(2) { 
 
    width: 100px; 
 
} 
 
table.fixedHeader th:nth-child(3), table.fixedHeader th:nth-child(4), table.fixedHeader td:nth-child(3), table.fixedHeader td:nth-child(4) { 
 
    width: 60px; 
 
} 
 
table.fixedHeader th:nth-child(5), table.fixedHeader th:nth-child(6), table.fixedHeader th:nth-child(7), table.fixedHeader td:nth-child(5), table.fixedHeader td:nth-child(6), table.fixedHeader td:nth-child(7) { 
 
    width: 120px; 
 
} 
 
table.fixedHeader th:nth-child(8), table.fixedHeader td:nth-child(8) { 
 
    width: 80px; 
 
}

<body> 
 
    <div class="title"> 
 
     \t <h1> Demo how to set fixed table header</h1> 
 
    </div> 
 
    <div class="tableHeader"> 
 
     <table class="fixedHeader"> 
 
      <thead> 
 
       <tr> 
 
        <th>head1</th> 
 
        <th>head2</th> 
 
        <th>head3</th> 
 
        <th>head4</th> 
 
        <th>head5</th> 
 
        <th>head6</th> 
 
        <th>head7</th> 
 
        <th>head8</th> 
 
       </tr> 
 
      </thead> 
 
     </table> 
 
    </div> 
 
    <div class="tableBody"> 
 
     <table class="fixedHeader"> 
 
      <tr> 
 
       <td>Text 1111</td> 
 
       <td>Text Text</td> 
 
       <td>3333</td> 
 
       <td>4444</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 2222</td> 
 
       <td>Text Text</td> 
 
       <td>3333</td> 
 
       <td>4444</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 3333</td> 
 
       <td>Text Text</td> 
 
       <td>3333</td> 
 
       <td>4444</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 4444</td> 
 
       <td>Text Text</td> 
 
       <td>3333</td> 
 
       <td>4444</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 5555</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 6666</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 7777</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 8888</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text 9999</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text aaaa</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text aaaa</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text bbbb</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text cccc</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text dddd</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
       <td>Even More Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text eeee</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text ffff</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text gggg</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text hhhh</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
      <tr> 
 
       <td>Text iiii</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
       <td>Text Text</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</body>

источник

2015-04-06 Justin

Добавить в таблицу стилей сброса или установки body { margin: 0; }, чтобы избежать того, чтобы скрыть любые overflow.

источник

2015-04-06 21:13:20 Evan

Evan, это прекрасно работает. Большое спасибо! – Justin

Удивительный! Да, если вы решите не использовать коробку-модель, очистить этот конкретный запас или использовать таблицу стилей сброса, вам нужно будет установить переполнение-x для скрытия на родительском столе или на теле. – Evan

Попробуйте добавить CSS переполнение-х: скрытый; к столу.

источник

2015-04-06 20:42:08

горизонтальный Полоса прокрутки не относится к таблице. Я пробовал, он не работает. – Justin

Хорошо, попробуйте добавить «overflow-x: hidden;» для div.tableHeader. –

На самом деле то, что вам нужно, это добавить overflow-y: hidden; к вашему .tableHeader DIV

здесь обновленное скрипку http://jsfiddle.net/gcfurtqs/4/

источник

2015-04-06 20:47:29 Charbz

Я все еще видел, что горизонтальная полоса прокрутки – Justin

Привет, горизонтальная полоса прокрутки, которую вы видите, принадлежит , поэтому я обновил скрипку здесь http://jsfiddle.net/gcfurtqs/5/, но НЕ рекомендуется ставить 'overflow-x : hidden' для тела, вам лучше обернуть всю таблицу в div и применить ее к обертке – Charbz

Charbz, он работает на теле, спасибо! Но он не может работать ни на одном контейнере div – Justin

Раздражающая горизонтальная полоса прокрутки

ответ

Смежные вопросы