Benötigen Sie einen Bildlauf Zelle in einer html Tabelle

Ich habe eine html-Tabelle enthält eine Zelle wird eine Menge von Daten (vielleicht 200 Zeilen).
Anstatt dass meine Seite zu scrollen, will ich meine Zelle in der Tabelle zu Blättern.

Ich verstehe, dass ich brauche eine div block, dies zu tun. Definierte ich ein div-block in meinem
css-Datei, aber es ist nicht nehmen.

Wie behebe ich die Höhe meiner Zelle und gebe meine Daten ein scrollbar?

--------html Tabelle-----------

<table class="cmain">
  <tr>
    <td>  TOP LEFT CELL <p>
        <table> <tr> <td> A sub-table goes here </td> </tr> </table>
    </td>
    <td>  TOP RIGHT CELL <p>
       <p> A PHOTO GOES HERE.
       <p> PHOTO: {{ form.image }}
   </td>
   <td rowspan="2" valign="top" > 
       THIS IS THE CELL THAT NEEDS THE SCROLL BAR.  <div id="scrollcell">
           SCROLLER CELL <hr>
            <p> {% for customer in customer_list  %}
            <p> {{ customer }} </p>
           {% endfor %}
       </div>
   </td>
  </tr>
  <tr>
<td> Another Sub-table goes here.
        <table> <tr> <td> A sub-table goes here </td> </tr> </table>
</td> 
   <td> A NOTES FORM FIELD GOES HERE <p>
     {{ form.notes }} </td>
 </tr>
</table> <!-- end of CMAIN table -->

--------css -----------

table, th, td {
        border: 1px solid white;
}

table.cmain {
        border: 1px solid blue;
}

table.cmain td { 
        border: 1px solid blue;
    font-weight: bold;
        /*width: 300;*/
        padding: 3px; 
    font-size: 0.8em;
}

#scrollcell {
        width: 50px;
        height: 50px;
        overflow: auto;
}
InformationsquelleAutor codingJoe | 2011-10-23
  1. 1

    Antwortete ich, eine Frage wie diese eine Weile zurück, werfen Sie einen Blick auf die Antwort hier und die demo hier.

    BEARBEITEN

    Postest hier den code für zukünftige Referenz für die anderen Poster:

    HTML

    <table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th colspan="1" rowspan="5" style="border: medium none ; width: 100px; vertical-align: top;">
            <div class="inner-table">
                <table style="text-align: left; width: 500px; border:none" border="1" cellpadding="2" cellspacing="2">
                <tbody>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                        <th>Header 4</th>
                    </tr>
                    <tr>
                        <td>a</td>
                        <td>a</td>
                        <td>a</td>
                        <td>a</td>
                    </tr>
                    <tr>
                        <td>b</td>
                        <td>b</td>
                        <td>b</td>
                        <td>b</td>
                    </tr>
                    <tr>
                        <td>c</td>
                        <td>c</td>
                        <td>c</td>
                        <td>c</td>
                    </tr>
                </tbody>
                </table>
            </div>
        </th>
        <th>Header 4</th>
    </tr>
    <tr>
        <td>a</td>
        <td>a</td>
        <td>a</td>
    </tr>
    <tr>
        <td>b</td>
        <td>b</td>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
        <td>c</td>
        <td>c</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</tbody>
</table>

    CSS

    .inner-table {
    width:100px;
    overflow-x:scroll;
}

th {
    height:20px;
}

    Wenn Sie möchten, um die vertikale und horizontale Bildlaufleisten angezeigt, ersetzen Sie einfach overflow-x:scroll; mit overflow:scroll für die .inner-table Klasse.

    InformationsquelleAutor Andres Ilich
  2. 0

    Die einfachste Lösung wäre, die Tabelle in ein iframe. Ansonsten können Sie entweder javascript oder overflow.

    • Warum ist ein iframe die einfachste Lösung?
    • Einfachste und schlechteste, die ich sagen möchte.
    InformationsquelleAutor Anonymous
  3. 0

    geben dieser td eine absolute Höhe und 100% Breite/Höhe des div -

    <td rowspan="2" valign="top" >

    wie 

    <td rowspan="2" valign="top" style="height:100px;">

    und

    #scrollcell {
    width: 100%;
    height: 100%;
    overflow: auto;
}
    InformationsquelleAutor Eddy Freddy
Schreibe einen Kommentar