<table><tbody> scorrevole?

Vorrei avere una tabella con una barra di scorrimento a destra.
Voglio raggiungere questo senza alcun plug-in(jQuery) solo con i css.
L’intestazione della tabella dovrebbe rimanere fisso.

Cosa devo fare per ottenere questo lavoro?

InformationsquelleAutor JNK | 2011-03-17

 

7 Replies
  1. 39

    Si sono assunti un compito che, se si riuscirà, farà di te un eroe. Ho provato questa e la semplice cosa — posizione:fisso; <thead> — è impossibile. Ho dovuto copiare tutti i <thead> in un nuovo oggetto. Ma quando lo si fa, la spaziatura orizzontale del <th> elementi vanno tutte così le rubriche non in linea con il <td>s più. Ho finito di fare qualcosa di simile a questo:

    Prima di tutto, abbandonare ie6 e ie7. Non c’è speranza per quei ragazzi.

    1. Fare due copie del tavolo, quello in cui il corpo è invisibile e la <thead> è visibile, e l’altro dove è vice-versa.

    2. Dare z-index:1; a tavola con il visibile <thead>.

    3. Dare z-index:0; a tavola con il visibile <tbody>.

    4. Trattare con scorrimento orizzontale, ma non fino a dopo si scopre che onScroll non è un ie8 evento (per non parlare di ie6), in modo che si deve prendere un setInterval rompere ogni decimo di secondo o giù di lì solo per gestire lo scorrimento della <thead> a sinistra e a destra in ie8.

    Questo vi darà un corpo di tabella di scorrimento infinito in entrambi gli assi, con una tabella di testa che scorrono l’asse x solo. Praticamente funziona in FF, Chrome e Safari. Ma è traballante, in ie8. Un vero e proprio pita.

    Buona fortuna, e si prega di scrivere se si ottiene questo lavoro!

    • Ho finito per usare una seconda tabella e aggiungere un ulteriore <th></td> (vuoto) al fine di <table><theah><tr><th>One</th><th>Two</th><th></th></thead></table> e quindi l’impostazione di larghezza e 16 px così non è in linea… qui di Seguito che ho una seconda tabella… L’intestazione non di linea fino al 100%, ma è un bene abbastanza… 😀
    • buon per te! Ed è eccellente, che è in grado di riconoscere il punto in cui è “abbastanza buono”, il punto in cui, in termini pratici, è tutto finito.
    • Onestamente questa risposta non mi sembra proprio. Ottengo quello che stai dicendo, ma anche come illustrato nel link qui sotto è possibile. Il trucco è di impostare in modo esplicito l’altezza del tbody invece di cercare di lasciare in eredita da un elemento padre. Potenzialmente e ‘ un modo ideale attorno a dover impostare l’altezza del tbody esplicitamente è semplicemente la creazione di un plugin per jQuery che consente di impostare l’altezza del tbody per essere all’altezza di un contenitore meno l’altezza del thead.
    • Grazie @PeteWilson. Ho provato la tua soluzione e funziona su Firefox 24.0
    • Questo può aiutare a : stackoverflow.com/a/21250481/2837412
  2. 5

    Solo Firefox e IE6-7 i browser supportano il built-in <tbody> scorrimento:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Scrolling</title>
        <style type="text/css">
            div.content
            {
                border: #000000 1px solid;
                height: 400px;
                overflow-y: auto;
                width: 800px;
            }
    
            .fixedHeader 
            {
                white-space: nowrap;
            }
    
            .fixedHeader tr 
            {
                height: auto;
                position: relative;
            }
    
            .fixedHeader tr td 
            {
                background-color: #778899;
                border: #000000 1px solid;
                text-align: center;
            }
    
            tbody.scrollContent 
            {
                overflow-x: hidden;
                overflow-y: auto;
                height: 370px;
            }
    
            .scrollContent tr td 
            {
                background-color: #C0C0C0;
                border: #000000 1px solid;
                padding-right: 22px;
                vertical-align: top;
            }
        </style>
        <!--[if IE]>
        <style type=text/css>
            div.content 
            {
                overflow-x: hidden;
                overflow-y: auto;
            }
        </style>
        <![endif]-->
    </head>
    <body>
    <div>
        <div class="content">
            <table cellspacing="0">
                <thead class="fixedHeader">
                    <tr>
                        <td>Cell 1</td>
                        <td>Cell 2</td>
                        <td>Cell 3</td>
                        <td>Cell 4</td>
                    </tr>
                </thead>
                <tbody class="scrollContent">
                    <tr>
                        <td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs.  Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
                        <td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. </td>
                        <td>Pages can be displayed either with or without tabs. </td>
                        <td>Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs. Pages can be displayed either with or without tabs.  Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented. Pages can be displayed either with or without tabs. Pages with tabs are preferred for a standard user interface, and pages without tabs are preferred for a wizard. If tabs are omitted, you must provide a way of moving through the pages. For instance, Back and Next buttons can be implemented.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>            
    </body>
    </html>
    • Opere in Opera 11.x WinXP troppo.
    • se questo funziona io … io … beh, io piango lacrime di gioia pura.
    • IE non supporta affatto. Basato su Webkit browser, inoltre, non. Solo FF2/3 e certe Opere non supportano. Il nuovo FF4 tuttavia non il supporto di più. Questo è in particolare non è specificato da W3.
    • Quanto sopra NON è una scorrevole tbody con intestazione fissa per QUALSIASI versione di IE.
  3. 3

    Ecco la soluzione,

    Tavolo fisso intestazione e il contenuto all’interno della tabella può essere scorrevole.

    Parte HTML

    <div class="table_wrapper">
        <div class="header">
            <div class="head1">Left</div>
            <div class="head2">Center</div>
            <div class="head3">Right Column</div>
        </div>
        <div class="tbody">
            <table>
                <tbody><tr><td class="td1">1</td><td class="td2">2</td><td class="td3">3</td></tr>
                <tr><td class="td1">1</td><td>2</td><td class="td3">3</td></tr>
                <tr><td class="td1">2</td><td>second</td><td class="td3">third</td></tr>
                <tr><td class="td1">3</td><td>second</td><td class="td3">third</td></tr>
                <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
                <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
                <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
                <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
                <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
                <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
                <tr><td class="td1">first</td><td>second</td><td class="td3">third</td></tr>
            </tbody></table>
        </div>
    </div>

    CSS Parte

    .table_wrapper {background:tomato;border:1px double olive;float:left;}
    .tbody{height:80px;overflow-y:auto;width:400px;background:yellow;}
    table{border-collapse:collapse; width:100%;}
    td{border-right:1px solid red;border-bottom:1px solid red;padding:1px 5px;}
    .td3{border-right-width:0;}
    
    .header{ width:400px;background:DodgerBlue;border-bottom:1px solid red;}
    .header div{padding:1px 5px;float:left;border-right:1px solid orange;}
    .header .head3{float:none;border-right-width:0;}
    .head3 span{padding-left:5px;}
    
    .td1{width:100px;}
    .td2{width:140px;}
    .header .head1{width:100px;}
    .header .head2{width:140px;}
    • Questo funziona dando automaticamente il dimensionamento larghezza delle colonne al contenuto.
  4. 1
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
            table
            {
                width: 320px;
                display: block;
                border:solid black 1px;
            }
    
            thead
            {
                display: inline-block;
                width: 100%;
                height: 20px;
            }
    
            tbody
            {
                height: 200px;
                display: inline-block;
                width: 100%;
                overflow: auto;
            }
    
            th, td
            {
                width: 100px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
    • Questa è la mia versione … Andrey Batchvarov
    • Ha lavorato per me, e sto usando il bootstrap. Ho appena inserito una classe per ogni tabella attributo, avvolto tabella in un div, e questo ha funzionato alla grande. Quindi, in questo modo ho potuto chiamare solo in caso di specifiche div e il suo bambino di elementi (gli elementi della tabella).. l’ho appena rimosso il thead altezza, come ha aggiunto un extra di bar. altrimenti grande !!!
    • Non funziona per il 100% di tabelle di larghezza? jsfiddle.net/jgngg28t
  5. 0

    Questo semplice CSS dovrebbe fare il trucco:

    table.table-scroll-body {
      position: relative;
      height: 200px; }
    
      table.table-scroll-body tbody {
        position: absolute;
        width: 100%;
        max-height: 150px;
        overflow: auto; }

    E l’HTML se avete bisogno..

    <table class="table-scroll-body">
      <thead>
        <th>Header 1</th>
        <th>Header 2</th>
      </thead>
      <tbody>
        <tr>
          <td>Some content..</td>
          <td>Some content..</td>
        </tr>
        <tr>
          <td>Some content..</td>
          <td>Some content..</td>
        </tr>
        <tr>
          <td>Some content..</td>
          <td>Some content..</td>
        </tr>
      </tbody>
  6. 0

    diramazioni del astrandr risposta.. ecco come ho fatto, utilizzando il loro esempio:

    css:

     .transactHistory table
    {
       width: 320px;
       display: block;
    }
    
    .transactHistory thead
    {
      display: inline-block;
    }
    
    .transactHistory tbody
    {
            height: 133px;
            display: inline-block;
            width: 100%;
            overflow: auto;
    }
    
    .transactHistory th
    {
            width: 100px;
            text-align:center;
    }
    
    .transactHistory tr
    {
            width: 100px;
            text-align:center;
     }
    
     .transactHistory td
     {
            width: 100px;
            text-align:center;
     }

    Tabella:

     <div class="transactHistory">
        (..table code)
     </div>
  7. 0

    Questo funziona, ha preso subito il mio sito web:

    #news_box {
    overflow: scroll;
    overflow-x: hidden;
    }

    MODIFICA:
    Anche io ho appena trovato questo con un bell’esempio:

    http://www.imaputz.com/cssStuff/bigFourVersion.html

    Qui c’è un altro articolo su di esso:

    http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html

    • ma in quelle due pagine l’intera tabella-tra cui il thead — scorre fuori dalla pagina. Sì, se si scorre la tabella solo corpo funziona alla grande. Ma se la tabella è reale, reale, reale e profondo, vero grande, mi piacerebbe utilizzare la barra di scorrimento della pagina, mantenendo l’intestazione visibile in alto per tutto il tempo. Solo imo, naturalmente.
    • tenta di aprire questo su ie7 o ie8, è un miracolo se funziona da lì. 🙂
    • Prova questo : stackoverflow.com/a/21250481/2837412
    • Inoltre, non funziona per me in IE7 / WinXP.
    • Senza contesto (ad esempio HTML), la risposta è praticamente inutile.

Lascia un commento