Div с горизонтальной прокруткой

У меня есть фиксированная ширина DIV, содержащая таблицу со многими столбцами, и вам нужно разрешить пользователю прокручивать таблицу по горизонтали внутри DIV.

Это необходимо для работы только с IE6 и IE7 (внутреннее клиентское приложение).

В IE7 работает следующее:

overflow-x: scroll;

Может ли кто-нибудь помочь с решением, которое работает и в IE6?

Ответ 1

Решение довольно прямолинейно. Чтобы гарантировать, что мы не будем влиять на ширину ячеек в таблице, мы отключим белое пространство. Чтобы обеспечить горизонтальную полосу прокрутки, мы включим overflow-x. И это в значительной степени:

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

Вы можете увидеть конечный результат здесь или в анимации ниже. Если таблица определяет высоту вашего контейнера, вам не нужно явно указывать overflow-y на hidden. Но поймите, что это тоже вариант.

Ответ 2

Я не мог заставить выбранный ответ работать, но после небольшого исследования я обнаружил, что горизонтальный прокручиваемый div должен иметь white-space: nowrap в css.

Здесь полный рабочий код:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 1000px;
            height: 190px;
            overflow: auto;
            overflow-y: hidden;
            margin: 0 auto;
            white-space: nowrap
        }

        img{
            width: 300px;
            height: 150px;
            margin: 20px 10px;
            display: inline;
        }
    </style>
</head>
<body>
    <div id='scrolly'>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
    </div>
</body>
</html>

Ответ 3

overflow-x: scroll;
overflow-y: hidden;

EDIT:

Это работает для меня:

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>

Ответ 4

Для горизонтальной прокрутки имейте в виду следующие два свойства:

overflow-x:scroll;
white-space: nowrap;

Смотрите рабочую ссылку: нажмите меня

HTML

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better   control of the layout. The default value is visible.You can use the overflow property when you want     to have better control of the layout. The default value is visible.</div>

CSS

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}

Ответ 5

попробуй это:

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS:

.container {
  width: 200px;
  height: 100px;
  display: flex;
  overflow-x: auto;
}

.item {
  width: 100px;
  flex-shrink: 0;
  height: 100px;
}

Пустое пространство: Nowrap; свойство не позволяет вам переносить текст. Просто посмотрите здесь для примера: https://codepen.io/oezkany/pen/YoVgYK