scrol bar orizzontale in una tabella

**n1o** · 10-06-2010, 10:23

Ciao a tutti ragazzi come faccio ad inserire una scroll bar orizzontale in una tabella che sta all'interno di un div?

grazie a tutti per l'eventuale aiuto.

**Mich_** · 10-06-2010, 11:04

Le scroll bar si inseriscono mediante gli attributi overflow:

Prova prima con
overflow: auto;

Poi puoi provare
overflow-x: auto;
overflow-y: hidden;

naturalmente i valori li puoi settare come meglio credi: tra i valori accettati ci sono hidden, visible, auto, scroll (e in qualche browser altri, ma ora non funziona il mio reference preferito e non li vedo tutti)

NOTA: overflow-x e -y non fanno parte delle specifiche, ma sono interpretati da qualche browser. Pertanto occorre sempre mettere un overflow PRIMA dei due overflow-x e -y

**n1o** · 10-06-2010, 13:35

io ho questa struttura nella pagina:

codice:

 
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.util.*" %>
<%@page import="it.poste.tool.persistence.entities.VRicercaAggrCodMazzetto" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Track & Trace - Monitoring tool - Ricerca Mazzetti per Frazionario - Risultati</title>
        <%-- Inizio import css --%>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/menu.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.custom.css" />
        <%-- Fine import css --%>

        <%-- Inizio javascript --%>
         <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
         <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
         <script type="text/javascript" src="js/menu.js"></script>
         <script type="text/javascript">
            JQ = $;  //rename $ function
        </script>

    <script language="javascript">
        JQ(document).ready(function() {
            oTable = JQ('#table_listMazzetti').dataTable({
		"bJQueryUI": true,
		"sPaginationType": "full_numbers"
            });
        });
    </script>
      <script language="javascript" type="text/javascript" src="js/jquery.dataTables.js"></script>
        <%-- Fine javascript --%>
    </head>
    <body>
        <div id="container">
            

<%@include file="header.jsp"%>
<div id="wrapper">
<%@include file="menu.jsp"%>
<div id="title">
  <h2>Ricerca Mazzetti per codice</h2>
    

 

</div>
<div id="content">

      <table id="table_listMazzetti">
 <%
            Iterator i =(Iterator)request.getAttribute("frazionario");
                VRicercaAggrCodMazzetto codMazz = new VRicercaAggrCodMazzetto();
        %>
      <thead>
        <tr>
          <th> Prog. </th>
          <th> Codice </th>
          <th> Tipo Mazzetto </th>
          <th> Fraz. </th>
          <th> Nome Ufficio </th>
          <th> Status </th>
          <th> Lavorazione </th>
          <th> Nome del Grande Utente </th>
          <th> Nome del Messo Notificatore </th>
          <th> Zona di recapito </th>
          <th> Tipologia Area di Lavorazione </th>
          <th> Consegnato </th>
          <th> Notificato </th>
          <th> Data di Creaz. </th>
          <th> Data di Controllo </th>
          <th> Data di Scans. </th>


        </tr>
       </thead>
        <tbody>
        <%
                    while(i.hasNext()){
                        codMazz =(VRicercaAggrCodMazzetto)i.next();
        %>
        <tr>
                <td><%= codMazz.getProgressivo() %></td>
                <td><%= codMazz.getCode() %></td>
                <td><%= codMazz.getSiglavideo() %></td>
                <td><%= codMazz.getFrazionario() %></td>
                <td><%= codMazz.getNomeUfficio() %></td>
                <td><%= codMazz.getDescrizioneStatus() %></td>
                <td><%= codMazz.getName() %></td>
                <td><%= codMazz.getNomeDelGrandeUtente() %></td>
                <td><%= codMazz.getNomeDelMessoNotificatore() %></td>
                <td><%= codMazz.getZonaDiRecapito() %></td>
                <td><%= codMazz.getDescrizioneTipologiaAreaDiLavorazone() %></td>
                <td><%= codMazz.getDataOraDiConsegna() %></td>
                <td><%= codMazz.getDataEOraDiNotifica() %></td>
                <td><%= codMazz.getCreationDate() %></td>
                <td><%= codMazz.getCheckDate() %></td>
                <td><%= codMazz.getScanDate() %></td>

             <% } %>
            </tr>
        </tbody>
      </table>
</div>
</div>
<%@include file="footer.jsp"%>
</div>
    </body>
</html>

la tabella allarga il div che la contiene e perciò risulta fuori dalla cornice dell'impagginazione (sempre rimanendo all'interno della visuale dello schermo).
Vorrei che il div che la contiene rimanesse della stessa dimensione con una scroll bar laterale.
Ho provato ad inserire overflow:auto; nella tabella ma niente, si può fare senza utilizzare un frame?

questi sono i div interessati:
questo è il contenitore

codice:

 
div#content{
    display: block;
    width: 950px;
    position: absolute;
}
div#content p{
    background:#fff;
    /*border: #0000ff 1px solid; */
    margin-left: 0px;
    margin-bottom: 2px;
}
div#content h2{
    text-align: center;
    background: #ebff00;
    font-size: 12px;
    margin: 1px;
    border: 1px #0000ff solid;
}

questo è il div della tabella:

codice:

 
#table_listMazzetti {
    width: 950px;
    border: 1px solid #0000ff;
    overflow:auto;
}
/*#table_listMazzetti p{
    width: 100px
}*/
#table_listMazzetti th {
    font-size: 12px;
    font-weight: bold;
}
#table_listMazzetti td {
    font-size: 10px;
    border-right: 1px solid #0000ff;
    border-bottom: 1px solid #0000ff;
    text-align: center;
}

**Mich_** · 10-06-2010, 14:41

Il codice lato server che hai postato non e` di aiuto.
Posta invece il codice HTML come lo riceve il browser (eventualmente salta le ripetizioni uguali).
E posta la DTD che stai usando.

Inoltre devi dire se il problema lo hai in tutti i broeser o se stai testando solo in IE. Questo tipo di problemi non sono risolvibili se usi IE in modalita` retrocompatibile (quirks) (ma si possono risolvere tramite JS), mentre non dovrebbero esserci nei browser standard o in IE 7+ in modalita` standard.

**n1o** · 10-06-2010, 14:48

E posta la DTD che stai usando.

cosa?
Lo sto testando con ie 8 e su firefox e la situazione è la stessa

questo è l'html

codice:

 
<div id="content">
 
      <table id="table_listMazzetti">
 
      <thead>
        <tr>
          <th> Prog. </th>
          <th> Codice </th>
          <th> Tipo_Mazzetto </th>
          <th> Frazionario </th>
          <th> Nome_Ufficio </th>
          <th> Status </th>
          <th> Lavorazione </th>
          <th> Nome_del_Grande_Utente </th>
          <th> Nome_del_Messo_Notificatore </th>
          <th> Zona_di_recapito </th>
          <th> Tipologia_Area_di_Lavorazione </th>
          <th> Consegnato </th>
          <th> Notificato </th>
          <th> Data_di_Creazione. </th>
          <th> Data_di_Controllo </th>
          <th> Data_di_Scansione </th>
 
 
        </tr>
       </thead>
        <tbody>
        
        <tr>
                <td>2</td>
                <td>0141900010020161</td>
                <td>Mazzetto PortaLettere Mix Locale</td>
                <td>01419</td>
                <td>AL ARQUATA S. PDD</td>
                <td>Consegnato al Portalettere</td>
                <td>Distribuzione Mix (1)</td>
                <td>null</td>
                <td>null</td>
                <td>1</td>
                <td>Area Automatizzata (Sezione)</td>
                <td>2010-06-10 09:58:23.863</td>
                <td>null</td>
                <td>2010-06-10 09:38:26.535</td>
                <td>2010-06-10 09:38:26.535</td>
                <td>2010-06-10 09:41:28.729</td>
 
        </tbody>
      </table>
</div>

**Mich_** · 10-06-2010, 15:31

DTD = document type definition
E` inclusa nella stringa DOCTYPE.

**n1o** · 10-06-2010, 15:37

ah grazie eccolo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

**Mich_** · 10-06-2010, 15:46

Stai usando un linguaggio vecchiotto ...

Prova con la DTD XHTML 1.0 Strict. Da quanto hai postato, il tuo codice e` compatibile con tale DTD.

Pero` prima di dire che non funziona, fa' una verifica con i validatori:
validatore HTML
validatore CSS

**n1o** · 14-06-2010, 17:39

ciao a tutti ho risolto il problema dello scrollbar orizzontale, adesso funziona benissimo, l'unico problema è che nella mia tabella c'è un header che mi prende la misura del div che lo contiene e mi lascia parte della tabella "scoperta" al momento in cui si effettua lo scroll verso destra.
Questo è il div superiore:

codice:

 
div#content{
    width: 950px;
   overflow-x: auto;
    padding-bottom: 20px;
}

questo è l'header della tabella:

codice:

 
.ui-widget-header {
    width: auto;
    border: 1px solid #0000ff;
    background: #ebff00 url(../img/ui-bg_gloss-wave_75_ebff00_500x100.png) 50% 50% repeat-x;
    color: #0000ff;
    font-weight: bold;
    margin-top: 2px;
    overflow-x:visible;
}
.ui-widget-header a { 
    color: #0000ff;
}

e questa è la situazione in cui mi trovo:

questa è l'immagine che fa vedere la situazione

adesso vi chiedo come faccio o ad allungare il div oltre la lunghezza del suo div contenitore (non credo che si possa fare) oppure a far rimanere il divv fisso allo scorrere della scrollbar.
Grazie mille a tutti per l'aiuto
P.S
Ho provato sia con il fixed nel background che il background-attachament: fixed; che il position: fixed;
Ma niente non me li prende. sarei disposto ad usare anche un javascript se non si può fare solamente con i css.

**Mich_** · 15-06-2010, 08:14

Difficile rispondere senza vedere il codice HTML e CSS.

Comunque il
width: 100%;
esiste e funziona (ma occorre che il contenitore abbia larghezza definita)

Discussione: scrol bar orizzontale in una tabella

Strumenti discussione

Ricerca discussione

Visualizza

scrol bar orizzontale in una tabella

Permessi di invio