Div dengan pengguliran horizontal saja

89

Saya memiliki DIV lebar tetap yang berisi tabel dengan banyak kolom, dan perlu mengizinkan pengguna untuk menggulir tabel secara horizontal di dalam DIV.

Ini perlu bekerja hanya pada IE6 dan IE7 (aplikasi klien internal).

Pekerjaan berikut di IE7:

overflow-x: scroll;

Adakah yang bisa membantu dengan solusi yang berfungsi di IE6 juga?

html css Richard Ev
sumber
Properti overflow-x seharusnya bekerja dengan baik di IE6; Anda mungkin memiliki faktor yang memperumit. Dapatkah Anda memposting kasus uji yang menunjukkan masalah tersebut?
Ben Blank
Sepertinya masalah saya ada di tempat lain - DIV saya yang berisi meluap ke penampungnya.
Richard Ev

Jawaban:

196

Solusinya cukup mudah. Untuk memastikan bahwa kami tidak memengaruhi lebar sel di tabel, kami akan menonaktifkan spasi . Untuk memastikan kami mendapatkan bilah gulir horizontal, kami akan mengaktifkan overflow-x . Dan itu cukup banyak:

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

Anda dapat melihat hasil akhirnya di sini , atau dalam animasi di bawah ini. Jika tabel menentukan tinggi penampung Anda, Anda tidak perlu menyetel secara eksplisit overflow-yke hidden. Tapi pahami itu juga merupakan pilihan.

masukkan deskripsi gambar di sini

Sampson
sumber
4
Saya merindukan white-space: nowrap;. Bekerja seperti pesona!
AndreFeijo
4
Jika sebuah gambar memiliki makna seribu kata, gif bernilai sejuta.
HoldOffHunger
Anda juaranya, teman saya.
Spencer Williams
Bagaimana jika saya membutuhkan scroll vertikal individu juga di setiap kolom dan tidak ada scroll vertikal di main-container? Saya mencoba melakukannya dengan white-space: nowrap;di wadah utama dan pengaturan heightdan overflow-y: scrollke kolom individu, tetapi itu tidak berfungsi.
Sachin
ruang-putih: nowrap; Saya selalu jatuh dalam hal itu! terima kasih jawaban yang luar biasa!
talsibony
68

Saya tidak bisa mendapatkan jawaban yang dipilih untuk bekerja tetapi setelah sedikit penelitian , saya menemukan bahwa div pengguliran horizontal harus ada white-space: nowrapdi css.

Berikut kode kerja lengkap:

<!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>
WKS
sumber
2
Saran "white-space: nowrap" di sini tampaknya telah dicampur menjadi jawaban yang benar. 1 untuk meningkatkan jawaban yang diterima.
HoldOffHunger
21 
overflow-x: scroll;
overflow-y: hidden;

EDIT:

Ini bekerja untuk saya:

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

Untuk scroll horizontal, perhatikan kedua properti ini:

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

Lihat tautan yang berfungsi: klik saya

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;
}
ankitd
sumber
5

coba ini:

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

Ruang putih: nowrap; properti jangan biarkan Anda membungkus teks. Lihat saja di sini untuk contoh: https://codepen.io/oezkany/pen/YoVgYK

oezkany
sumber