Scrollbare Tabellenkörper und feste Kopfzeile

Question

Ich habe eine Website, die eine einfache Tabelle mit Wetterdaten zeigt. Wir müssen viele Zeilen anzeigen, also möchte ich den Body scrollbar machen, während der Header fixiert bleibt.

Ich habe eine Reihe von Lösungen versucht, aber keine von ihnen scheint mit meinem Tabellenkopf kompatibel zu sein (einige Header-Zellen haben Unterkategorien).

Ich möchte eine Lösung basierend auf CSS und/oder Javascript finden. Die Einführung von jQuery oder ähnlichem würde die Site viel langsamer machen (viele der Benutzer haben Radiolink- oder Satelliteninternetzugang).

ich einen Teil meiner Code zu einem JSFiddle

<table> 

<thead> 
    <tr> 
    <th rowspan="2">Location</th> 
    <th rowspan="2">Updated</th> 
    <th colspan="2">Temperature [°C]</th> 
    <th colspan="2">Wind [m/s]</th> 
    <th rowspan="2">Air pressure [hPa]</th> 
    <th rowspan="2">Relative humidity [%]</th> 
    <th rowspan="2">Precipitation [mm]</th> 
    </tr> 
    <tr><th>present</th><th>wind chill</th><th>speed</th><th>max</th> </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>Aasiaat</td> 
    <td>20.07 15:00</td> 
    <td>9,3</td> 
    <td></td> 
    <td>2,5 &#8665;</td> 
    <td>3,1</td> 
    <td>1010</td> 
    <td>87,1</td> 
    <td>0,0</td> 
    </tr> 
    <tr> 
    <td>Angisoq</td> 
    <td>20.07 15:00</td> 
    <td>5,9</td> 
    <td></td> 
    <td>3,6 &#8656;</td> 
    <td>4,6</td> 
    <td>1013</td> 
    <td>85,0</td> 
    <td>n/a</td> 
    </tr> 
    <tr> 
    <td>Aasiaat</td> 
    <td>20.07 15:00</td> 
    <td>9,3</td> 
    <td></td> 
    <td>2,5 &#8665;</td> 
    <td>3,1</td> 
    <td>1010</td> 
    <td>87,1</td> 
    <td>0,0</td> 
    </tr> 
    <tr> 
    <td>Test3</td> 
    <td>20.07 15:00</td> 
    <td>9,3</td> 
    <td></td> 
    <td>2,5 &#8665;</td> 
    <td>3,1</td> 
    <td>1010</td> 
    <td>87,1</td> 
    <td>0,0</td> 
    </tr> 
    <tr> 
    <td>Test4</td> 
    <td>20.07 15:00</td> 
    <td>9,3</td> 
    <td></td> 
    <td>2,5 &#8665;</td> 
    <td>3,1</td> 
    <td>1010</td> 
    <td>87,1</td> 
    <td>0,0</td> 
    </tr> 
    <tr> 
    <td>Test5</td> 
    <td>20.07 15:00</td> 
    <td>9,3</td> 
    <td></td> 
    <td>2,5 &#8665;</td> 
    <td>3,1</td> 
    <td>1010</td> 
    <td>87,1</td> 
    <td>0,0</td> 
    </tr> 
</tbody> 
</table> 

Answer 1

dieses CSS versuchen kopiert haben:

.table-container { 
 
    height: 20em; 
 
    width:100% 
 
} 
 
table { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
table thead { 
 
    /* head takes the height it requires, 
 
    and it's not scaled when table is resized */ 
 
    flex: 0 0 auto; 
 
    width: calc(100% - 0.9em); 
 
} 
 
table tbody { 
 
    /* body takes all the remaining available space */ 
 
    flex: 1 1 auto; 
 
    display: block; 
 
    overflow-y: scroll; 
 
} 
 
table tbody tr { 
 
    width: 100%; 
 
} 
 
table thead, 
 
table tbody tr { 
 
    display: table; 
 
    table-layout: fixed; 
 
} 
 
/* decorations */ 
 
.table-container { 
 
    border: 1px solid black; 
 
    padding: 0.3em; 
 
} 
 
table { 
 
    border: 1px solid lightgrey; 
 
} 
 
table td, table th { 
 
    padding: 0.3em; 
 
    border: 1px solid lightgrey; 
 
} 
 
table th { 
 
    border: 1px solid grey; 
 
}

<div class="table-container"> 
 
<table> 
 

 
<thead> 
 
    <tr> 
 
    <th rowspan="2">Location</th> 
 
\t <th rowspan="2">Updated</th> 
 
    <th colspan="2">Temperature [°C]</th> 
 
\t <th colspan="2">Wind [m/s]</th> 
 
\t <th rowspan="2">Air pressure [hPa]</th> 
 
\t <th rowspan="2">Relative humidity [%]</th> 
 
\t <th rowspan="2">Precipitation [mm]</th> 
 
    </tr> 
 
    <tr><th>present</th><th>wind chill</th><th>speed</th><th>max</th> </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td>Aasiaat</td> 
 
    <td>20.07 15:00</td> 
 
    <td>9,3</td> 
 
    <td></td> 
 
    <td>2,5 &#8665;</td> 
 
    <td>3,1</td> 
 
    <td>1010</td> 
 
    <td>87,1</td> 
 
    <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Angisoq</td> 
 
    <td>20.07 15:00</td> 
 
    <td>5,9</td> 
 
    <td></td> 
 
    <td>3,6 &#8656;</td> 
 
    <td>4,6</td> 
 
    <td>1013</td> 
 
    <td>85,0</td> 
 
    <td>n/a</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Aasiaat</td> 
 
    <td>20.07 15:00</td> 
 
    <td>9,3</td> 
 
    <td></td> 
 
    <td>2,5 &#8665;</td> 
 
    <td>3,1</td> 
 
    <td>1010</td> 
 
    <td>87,1</td> 
 
    <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Test3</td> 
 
    <td>20.07 15:00</td> 
 
    <td>9,3</td> 
 
    <td></td> 
 
    <td>2,5 &#8665;</td> 
 
    <td>3,1</td> 
 
    <td>1010</td> 
 
    <td>87,1</td> 
 
    <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Test4</td> 
 
    <td>20.07 15:00</td> 
 
    <td>9,3</td> 
 
    <td></td> 
 
    <td>2,5 &#8665;</td> 
 
    <td>3,1</td> 
 
    <td>1010</td> 
 
    <td>87,1</td> 
 
    <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Test5</td> 
 
    <td>20.07 15:00</td> 
 
    <td>9,3</td> 
 
    <td></td> 
 
    <td>2,5 &#8665;</td> 
 
    <td>3,1</td> 
 
    <td>1010</td> 
 
    <td>87,1</td> 
 
    <td>0,0</td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 

 
</div>

Answer 2

Sie Javascript benötigt halten/gefälschte Tabellen-Layout-Eigenschaften (Zeilen-/Spaltenanpassung an einander)

Vielleicht ein clone() jquery + table-layout:fixed könnte ein Start mit gleichmäßig verteilten Spalten, Demo unten sein.

$("table thead ").clone().prependTo("table");

table, 
 
th, 
 
td, 
 
th tr { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
    border-color: #757575; 
 
} 
 
/* test */ 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
table, 
 
table thead:first-of-type { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    /* sprays column evenly when no width set */ 
 
} 
 
table thead:first-of-type { 
 
    position: fixed; 
 
    display: table; 
 
    top: 0; 
 
    background: white; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 

 
    <thead> 
 
    <tr> 
 
     <th rowspan="2">Location</th> 
 
     <th rowspan="2">Updated</th> 
 
     <th colspan="2">Temperature [°C]</th> 
 
     <th colspan="2">Wind [m/s]</th> 
 
     <th rowspan="2">Air pressure [hPa]</th> 
 
     <th rowspan="2">Relative humidity [%]</th> 
 
     <th rowspan="2">Precipitation [mm]</th> 
 
    </tr> 
 
    <tr> 
 
     <th>present</th> 
 
     <th>wind chill</th> 
 
     <th>speed</th> 
 
     <th>max</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Aasiaat</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Angisoq</td> 
 
     <td>20.07 15:00</td> 
 
     <td>5,9</td> 
 
     <td></td> 
 
     <td>3,6 &#8656;</td> 
 
     <td>4,6</td> 
 
     <td>1013</td> 
 
     <td>85,0</td> 
 
     <td>n/a</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Aasiaat</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test3</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test4</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test5</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Aasiaat</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Angisoq</td> 
 
     <td>20.07 15:00</td> 
 
     <td>5,9</td> 
 
     <td></td> 
 
     <td>3,6 &#8656;</td> 
 
     <td>4,6</td> 
 
     <td>1013</td> 
 
     <td>85,0</td> 
 
     <td>n/a</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Aasiaat</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test3</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test4</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test5</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Aasiaat</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Angisoq</td> 
 
     <td>20.07 15:00</td> 
 
     <td>5,9</td> 
 
     <td></td> 
 
     <td>3,6 &#8656;</td> 
 
     <td>4,6</td> 
 
     <td>1013</td> 
 
     <td>85,0</td> 
 
     <td>n/a</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Aasiaat</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test3</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test4</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Test5</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

hier Körper zeigt die Schriftrolle, aber es kann ein div mit einem Satz hoch sein, in diesem Fall sieht Demo unten, wo die Dinge kommen ein bisschen mehr Durchschnitt und knifflige ....

$("table thead ").clone().prependTo("table");

table, 
 
th, 
 
td, 
 
th tr { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
    border-color: #757575; 
 
} 
 
/* test */ 
 
*{box-sizing:border-box; 
 
    } 
 
div { 
 
    position:relative; 
 
    width : 700px; 
 
    padding-right:1em; 
 
    height:200px; 
 
    } 
 
div div {/* buffer for positionning*/ 
 
    position:static; 
 
    padding:0; 
 
    height:100%; 
 
    overflow:auto; 
 
} 
 
table, 
 
table thead:first-of-type { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    /* sprays column evenly when no width set */ 
 
} 
 
table thead:first-of-type { 
 
    position: absolute; 
 
    width: calc(100% - 1em - 1px); 
 
    display: table; 
 
    top: 0; 
 
    background: white; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><div> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th rowspan="2">Location</th> 
 
     <th rowspan="2">Updated</th> 
 
     <th colspan="2">Temperature [°C]</th> 
 
     <th colspan="2">Wind [m/s]</th> 
 
     <th rowspan="2">Air pressure [hPa]</th> 
 
     <th rowspan="2">Relative humidity [%]</th> 
 
     <th rowspan="2">Precipitation [mm]</th> 
 
     </tr> 
 
     <tr> 
 
     <th>present</th> 
 
     <th>wind chill</th> 
 
     <th>speed</th> 
 
     <th>max</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>Aasiaat</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Angisoq</td> 
 
     <td>20.07 15:00</td> 
 
     <td>5,9</td> 
 
     <td></td> 
 
     <td>3,6 &#8656;</td> 
 
     <td>4,6</td> 
 
     <td>1013</td> 
 
     <td>85,0</td> 
 
     <td>n/a</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Aasiaat</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Test3</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Test4</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Test5</td> 
 
     <td>20.07 15:00</td> 
 
     <td>9,3</td> 
 
     <td></td> 
 
     <td>2,5 &#8665;</td> 
 
     <td>3,1</td> 
 
     <td>1010</td> 
 
     <td>87,1</td> 
 
     <td>0,0</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    </div>  
 
    </div>

Answer 3

zog ich eine schnelle codepen für dich zu sehen.

Hier ist die Idee:

Entfernen Sie den Tabellenkopf und ersetzen Sie es mit einem festen Behälter, der den Header emuliert. Geben Sie der Tabelle eine Höhe und machen Sie einen Überlauf scroll.

Markup:

<ul class="table-header"> 
    <li>Location</li> 
    <li>Updated</li> 
    <li> 
    Temperature 
    <ul> 
     <li>present</li> 
     <li>wind chill</li> 
    </ul> 
    </li> 
    <li> 
    Wind 
    <ul> 
     <li>speed</li> 
     <li>max</li> 
    </ul> 
    </li> 
    <li>Air pressure</li> 
    <li>Relative humidity</li> 
    <li>Precipitation</li> 
</ul> 

css:

table { 
    width: 100%; 
    margin-top: 60px; 
    overflow: scroll; 
    max-height: 200px; 
} 

.table-header { 
    background-color: white; 
    position: fixed; 
    top: 0; 
    left: 0; 
    list-style: none; 
    display: flex; 
    padding-left: 0; 
    justify-content: space-around; 
    width: 100%; 
    li { 
    font-size: 1em; 
    font-weight: 600; 
    flex-grow: 1; 
    text-align: center; 
    } 
    ul { 
    display: flex; 
    list-style: none; 
    padding-left: 0; 
    li { 
     text-align: center; 
     flex-grow: 1; 
    } 
    } 
} 

Es ist nicht perfekt, aber Sie bekommen die Idee. Sie müssen nur mit Flex Basis herumspielen und den oberen Container wie den Tabellenkopf aussehen lassen.

http://codepen.io/zsawaf/pen/mExAak