Розділення лише з горизонтальною прокруткою

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