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

Question 1

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

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

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

overflow-x: scroll;

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

Question 2

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

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

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

Question 3

Я не мог заставить выбранный ответ работать, но после небольшого исследования я обнаружил, что 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>

Question 4

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

РЕДАКТИРОВАТЬ:

Меня устраивает:

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

Question 5

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

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;
}

Question 6

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

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