добавление горизонтальной полосы прокрутки к ячейкам таблицы - PullRequest
Новая
       8

добавление горизонтальной полосы прокрутки к ячейкам таблицы

0 голосов
/ 17 сентября 2018

У меня проблема с таблицей html (с помощью начальной загрузки)

У меня есть таблица с количеством строк.В последнюю ячейку каждой строки я хочу добавить горизонтальную полосу прокрутки.

Я загружаю свою HTML-страницу, чтобы вы могли понять, что я имею в виду - http://77.247.180.36/~pelegisr/sites/tours/res-org2.html

Как вы можете видеть, у меня есть серыйстолбец под названием «Ночи», который содержит количество небольших таблиц.Я хотел бы добавить X-прокрутку в каждую строку, чтобы я мог видеть все таблицы синего цвета.

Я пытался добавить стили: "display: inline-block; overflow-x:scroll; white-space: nowrap;" без какой-либо удачи ...

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Чтобы добавить полосу прокрутки в ячейку таблицы, вы можете сделать что-то вроде этого: 

<table border="1" style="table-layout:fixed; width:500px">
  <tr>
    <td style="width:100px;"><div style="overflow:scroll; width:100%">10000000000000000000000000000000000</div></td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>
0 голосов
/ 17 сентября 2018

Включить горизонтальную прокрутку.Если таблица слишком широка, чтобы поместиться в определенный макет, или у вас есть большое количество столбцов в таблице, вы можете включить горизонтальную (x) прокрутку для отображения таблицы в области просмотра, которую можно прокручивать.

Это свойство может иметь значение true, что позволяет при необходимости прокручивать таблицу по горизонтали (рекомендуется), или любой элемент CSS, или число (в этом случае оно будет рассматриваться как измерение пикселей) 

  $('#example').dataTable( {
  "scrollX": true
} );

Также вы можете проверить Добавить горизонтальную полосу прокрутки к таблице HTML есть альтернативное решение

...