Div con solo scorrimento orizzontale

89

Ho un DIV a larghezza fissa contenente una tabella con molte colonne e devo consentire all'utente di scorrere la tabella in orizzontale all'interno del DIV.

Questo deve funzionare solo su IE6 e IE7 (applicazione client interna).

I seguenti lavori in IE7:

overflow-x: scroll;

Qualcuno può aiutare con una soluzione che funziona anche in IE6?

html css

— Richard Ev
fonte

La proprietà overflow-x dovrebbe funzionare bene in IE6; potresti avere fattori complicanti. Potete pubblicare un test case che mostri il problema?

— Ben Blank

Sembra che il mio problema sia altrove: il mio DIV contenente sta traboccando nel suo contenitore.

— Richard Ev

200

La soluzione è abbastanza semplice. Per assicurarci di non influire sulla larghezza delle celle nella tabella, disattiveremo lo spazio bianco . Per assicurarci di ottenere una barra di scorrimento orizzontale, attiveremo overflow-x . E questo è praticamente tutto:

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

Puoi vedere il risultato finale qui o nell'animazione qui sotto. Se la tabella determina l'altezza del tuo contenitore, non dovresti aver bisogno di impostarlo esplicitamente overflow-ysu hidden. Ma capisci che è anche un'opzione.

— Sampson
fonte

4

Mi mancava il file white-space: nowrap;. Funziona come un fascino!

— AndreFeijo

4

Se un'immagine vale più di mille parole, una gif vale un milione.

— HoldOffHunger

Sei il campione, amico mio.

— Spencer Williams

E se avessi bisogno anche di uno scorrimento verticale individuale su ogni colonna e nessuno scorrimento verticale sul contenitore principale? Sto provando a farlo con white-space: nowrap;il contenitore principale e l'impostazione heighte overflow-y: scrollsu singole colonne, ma non funziona.

— Sachin

spazio bianco: nowrap; Ci cado sempre! grazie fantastica risposta!

— talsibony

68

Non sono riuscito a far funzionare la risposta selezionata ma dopo un po 'di ricerca , ho scoperto che il div a scorrimento orizzontale deve avere white-space: nowrapnel css.

Ecco il codice funzionante completo:

<!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
fonte

2

Il suggerimento di "spazio bianco: nowrap" qui sembra essere stato fuso nella risposta corretta. +1 per migliorare la risposta accettata.

— HoldOffHunger

21

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

MODIFICARE:

Per me funziona:

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

— Diodeus - James MacFarlane
fonte

18

Per lo scorrimento orizzontale, tieni presenti queste due proprietà:

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

Vedi collegamento funzionante: cliccami

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
fonte

5

prova questo:

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

Lo spazio bianco: nowrap; non ti consente di mandare a capo il testo. Basta vedere qui per un esempio: https://codepen.io/oezkany/pen/YoVgYK

— oezkany
fonte