Як відобразити смугу прокрутки на таблиці html

85

Я пишу сторінку, де мені потрібна таблиця html для підтримки встановленого розміру. Мені потрібні заголовки у верхній частині таблиці, щоб постійно залишатися там, але також потрібно тіло таблиці для прокрутки незалежно від того, скільки рядків додано до таблиці.

Я хочу, щоб це виглядало як метод 2 у цій URL-адресі: http://www.cssplay.co.uk/menu/tablescroll.html

Я спробував це зробити, але смужка прокрутки не відображається:

tbody {
  height: 80em;
  overflow: scroll;
}
<table border=1 id="qandatbl" align="center">
  <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
  </tr>

  <tbody>
    <tr>
      <td class='qid'></td>
      <td class="options"></td>
      <td class="duration"></td>
    </tr>
  </tbody>
</table>
Розгорніть фрагмент

html  css  scroll  html-table  overflow 
— Брюсі Бандіт
джерело
Чому ви не використовуєте код із прикладу методу? На <tbody>жаль, використовувати не можна .
— Майк Парк

Відповіді:

163

Щось на зразок цього?

http://jsfiddle.net/TweNm/

Ідея полягає в тому, щоб обернути <table>файл у нестатичному місці, <div>що має overflow:autoвластивість CSS. Потім розташуйте елементи в <thead>абсолютно.

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;

}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}
<div id="table-wrapper">
  <div id="table-scroll">
    <table>
        <thead>
            <tr>
                <th><span class="text">A</span></th>
                <th><span class="text">B</span></th>
                <th><span class="text">C</span></th>
            </tr>
        </thead>
        <tbody>
          <tr> <td>1, 0</td> <td>2, 0</td> <td>3, 0</td> </tr>
          <tr> <td>1, 1</td> <td>2, 1</td> <td>3, 1</td> </tr>
          <tr> <td>1, 2</td> <td>2, 2</td> <td>3, 2</td> </tr>
          <tr> <td>1, 3</td> <td>2, 3</td> <td>3, 3</td> </tr>
          <tr> <td>1, 4</td> <td>2, 4</td> <td>3, 4</td> </tr>
          <tr> <td>1, 5</td> <td>2, 5</td> <td>3, 5</td> </tr>
          <tr> <td>1, 6</td> <td>2, 6</td> <td>3, 6</td> </tr>
          <tr> <td>1, 7</td> <td>2, 7</td> <td>3, 7</td> </tr>
          <tr> <td>1, 8</td> <td>2, 8</td> <td>3, 8</td> </tr>
          <tr> <td>1, 9</td> <td>2, 9</td> <td>3, 9</td> </tr>
          <tr> <td>1, 10</td> <td>2, 10</td> <td>3, 10</td> </tr>
          <!-- etc... -->
          <tr> <td>1, 99</td> <td>2, 99</td> <td>3, 99</td> </tr>
        </tbody>
    </table>
  </div>
</div>
Розгорніть фрагмент

— Річард JP JP Le Guen
джерело
15
Як щодо стовпців із фіксованою шириною?
— Fractaliste
3
Я спробував вашу відповідь, але стовпці заголовків не вирівняні. Я використав лише ваш css у тезі стилю всередині тегу body, де скопіював вашу таблицю
— Антоніо
Чудове рішення, але у мене з ним проблеми. При спробі приховати рядок і встановити відображення: немає, між рядками є пробіли. Це не стосується звичайного столу. Будь-які ідеї, поради чи пропозиції?
— Даніїл Шевелєв
@Antonio: У мене була та ж проблема (відцентровані * стовпці заголовка здаються незрівнянними), але додавання transform: translateX(-50%)зробило для мене фокус [* по центру - це стандартний стиль у Firefox, який видаляється параметром „нормалізувати CSS“ у JSFiddle цієї відповіді]
— Сора.
44

Ви повинні вставити свій файл <table>у, <div>що він має фіксований розмір, і в <div>стилі ви повинні встановити overflow: scroll.

— hossein barzegari
джерело
1
дав висоту 500px для мого div, і він працював нормально. <div style = "overflow: scroll; height: 500px;">
— Ziggler
3
Не знаю, чому всі так ускладнили. Це має бути прийнятою відповіддю.
— amallard
1
Це, безумовно, найпростіше рішення. Можуть бути застереження щодо додавання div із переповненням та фіксованою висотою, але це рішення принаймні встановить вас у правильному напрямку.
— lsimonetti
1
Чудова відповідь товариш!
— Вітаємо вас:)
1
Це має бути прийнятою відповіддю. Просто, прямо до справи, і я нічим іншим цим не руйную.
— Я так стараюся, але плачу сильніше
40

Прийнята відповідь забезпечила хорошу вихідну точку, але якщо змінити розмір кадру, змінити ширину стовпців або навіть змінити дані таблиці, заголовки будуть плутатися різними способами. Кожен інший приклад, який я бачив, має подібні проблеми або накладає серйозні обмеження на макет таблиці.

Я думаю, що я нарешті вирішив усі ці проблеми. Потрібно було багато CSS, але кінцевий продукт приблизно такий же надійний і простий у використанні, як звичайний стіл.

Ось приклад, який має всі необхідні функції для реплікації таблиці, на яку посилається OP: jsFiddle

Кольори та межі потрібно було б змінити, щоб зробити їх ідентичними еталонним. Інформація про те, як вносити такі зміни, міститься в коментарях CSS.

Ось код:

/*the following html and body rule sets are required only if using a % width or height*/
/*html {
width: 100%;
height: 100%;
}*/
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 20px 0 20px;
  text-align: center;
  background: white;
}
.scrollingtable {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: auto; /*if you want a fixed width, set it here, else set to auto*/
  min-width: 0/*100%*/; /*if you want a % width, set it here, else set to 0*/
  height: 188px/*100%*/; /*set table height here; can be fixed value or %*/
  min-height: 0/*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 15px;
  line-height: 20px;
  padding: 20px 0 20px 0; /*need enough padding to make room for caption*/
  text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
  position: relative;
  border-top: 1px solid black;
  height: 100%;
  padding-top: 20px; /*this determines column header height*/
}
.scrollingtable > div:before {
  top: 0;
  background: cornflowerblue; /*header row background color*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
}
.scrollingtable > div > div {
  min-height: 0/*43px*/; /*if using % height, make this large enough to fit scrollbar arrows*/
  max-height: 100%;
  overflow: scroll/*auto*/; /*set to auto if using fixed or % width; else scroll*/
  overflow-x: hidden;
  border: 1px solid black; /*border around table body*/
}
.scrollingtable > div > div:after {background: white;} /*match page background color*/
.scrollingtable > div > div > table {
  width: 100%;
  border-spacing: 0;
  margin-top: -20px; /*inverse of column header height*/
  /*margin-right: 17px;*/ /*uncomment if using % width*/
}
.scrollingtable > div > div > table > caption {
  position: absolute;
  top: -20px; /*inverse of caption height*/
  margin-top: -1px; /*inverse of border-width*/
  width: 100%;
  font-weight: bold;
  text-align: center;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
  vertical-align: bottom;
  white-space: nowrap;
  text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
  display: inline-block;
  padding: 0 6px 0 6px; /*header cell padding*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px; /*match column header height*/
  border-left: 1px solid black; /*leftmost header border*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
  position: absolute;
  top: 0;
  white-space: pre-wrap;
  color: white; /*header row font color*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}
.scrollingtable > div > div > table > thead > tr > * + :before {
  content: "";
  display: block;
  min-height: 20px; /*match column header height*/
  padding-top: 1px;
  border-left: 1px solid black; /*borders between header cells*/
}
.scrollingtable .scrollbarhead {float: right;}
.scrollingtable .scrollbarhead:before {
  position: absolute;
  width: 100px;
  top: -1px; /*inverse border-width*/
  background: white; /*match page background color*/
}
.scrollingtable > div > div > table > tbody > tr:after {
  content: "";
  display: table-cell;
  position: relative;
  padding: 0;
  border-top: 1px solid black;
  top: -1px; /*inverse of border width*/
}
.scrollingtable > div > div > table > tbody {vertical-align: top;}
.scrollingtable > div > div > table > tbody > tr {background: white;}
.scrollingtable > div > div > table > tbody > tr > * {
  border-bottom: 1px solid black;
  padding: 0 6px 0 6px;
  height: 20px; /*match column header height*/
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/
.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/
<div class="scrollingtable">
  <div>
    <div>
      <table>
        <caption>Top Caption</caption>
        <thead>
          <tr>
            <th><div label="Column 1"></div></th>
            <th><div label="Column 2"></div></th>
            <th><div label="Column 3"></div></th>
            <th>
              <!--more versatile way of doing column label; requires 2 identical copies of label-->
              <div><div>Column 4</div><div>Column 4</div></div>
            </th>
            <th class="scrollbarhead"/> <!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->
          </tr>
        </thead>
        <tbody>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
        </tbody>
      </table>
    </div>
    Faux bottom caption
  </div>
</div>

<!--[if lte IE 9]><style>.scrollingtable > div > div > table {margin-right: 17px;}</style><![endif]-->
Розгорніть фрагмент

— Доктор Деструкто
джерело
чудова робота. У мене, однак, є таблиця з 15 стовпцями, і я, здається, зараз теж не можу містити таблицю до сторінки без горизонтальної смуги прокрутки. Я намагався налаштувати ваш css, ваш красиво закодований css, щоб розмістити більш динамічні стовпці з шириною, але нічого, що я змінюю, крім ширини таблиці, не має значення. Якщо я змінив ширину таблиці на 100%, тоді таблиця відображатиметься по ширині таблиці, але оскільки ширина стовпців не обертається, я все одно не бачу всіх 15 стовпців даних. У мене майже є прокручувальний стіл, який виглядає просто так, тому будь-яка допомога буде вдячна.
— нанкер
о, почекайте секунду, немає горизонтальної смуги прокрутки, таблиця просто відсікається.
— нанкер
@nanker Якщо вам потрібна горизонтальна прокрутка і ви хочете використати крихітний фрагмент JavaScript, вам слід перевірити цю відповідь . Це найкращий спосіб скласти таблицю прокрутки, про яку я знаю. Коли я розмістив цю відповідь, не було хорошого способу зробити горизонтальну прокрутку лише за допомогою CSS, але я давно не вивчав її, тому не знаю, що зараз можливо.
— DoctorDestructo
Чудова робота. Чи можете ви прокоментувати, як налаштувати кілька рядків заголовків? Просто повторити <tr><th></th>..</tr>конструкцію явно не працює. Дякую.
— Девід І. Макінтош,
@ DavidI.McIntosh Багаторядковий заголовок буде хитрим, використовуючи цю техніку. Додавати рядки було б просто, але я не впевнений, як ви отримаєте горизонтальні межі між ними. Можливо, ви захочете спробувати рішення JavaScript, яке я зв’язав у своєму попередньому коментарі, якщо з якихось причин ви не можете використовувати JS.
— DoctorDestructo
3

Я вирішив цю проблему, розділивши мій вміст на дві таблиці.

Одна таблиця - це рядок заголовка.

Секунди також є <table>тегом, але обгорнутий <div>статичною висотою та прокруткою переповнення.

— Цві
джерело
1

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

Якщо ви цього хочете, замініть height: x;на max-height: x;та overflow:scrollз overflow:auto.

Крім того, ви можете використовувати overflow-xі, overflow-yякщо хочете, і, очевидно, те саме працює горизонтальноwidth : x;

— Бен
джерело
0

Якщо ви дійшли до того, що всі згадані рішення не працюють (як це було для мене), зробіть наступне:

  • Створіть дві таблиці. Один для заголовка, а інший для тіла
  • Надайте дві таблиці різні батьківські контейнери / div
  • Стиль div другої таблиці дозволяє вертикальну прокрутку її вмісту.

Отак, у вашому HTML

<div class="table-header-class">
    <table>
       <thead>
          <tr>
            <th>Ava</th>
            <th>Alexis</th>
            <th>Mcclure</th>
          </tr>
       </thead>
    </table>
</div>
<div class="table-content-class">
   <table>
       <tbody>
          <tr>
            <td>I am the boss</td>
            <td>No, da-da is not the boss!</td>
            <td>Alexis, I am the boss, right?</td>
          </tr>
       </tbody>
    </table>
</div>

Потім укладіть батьківський стіл другої таблиці, щоб дозволити вертикальну прокрутку у вашому CSS

    .table-content-class {
        overflow-y: scroll;    // use auto; or scroll; to allow vertical scrolling; 
        overflow-x: hidden;    // disable horizontal scroll 
    }
— Кака Руто
джерело
Це така сама реалізація, як відповідь Zvi роком раніше.
— TylerH
0

просто додайте на стіл 

style="overflow-x:auto;"


<table border=1 id="qandatbl" align="center" style="overflow-x:auto;">
    <tr>
    <th class="col1">Question No</th>
    <th class="col2">Option Type</th>
    <th class="col1">Duration</th>
    </tr>

   <tbody>
    <tr>
    <td class='qid'></td>
    <td class="options"></td>
    <td class="duration"></td>
    </tr>
    </tbody>
</table>
Розгорніть фрагмент

style = "overflow-x: auto;" `

— Майстер навчання
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.