水平スクロールのみの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

水平スクロールの場合、次の2つのプロパティに注意してください。

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