Qaisa Qaisa - 4 months ago 42
HTML Question

Scrollable table body and fixed header

I have a website showing a simple table with weather data. We need to show many rows, so I want to make the body scrollable, while keeping the header fixed.

I have tried a number of solutions, but none of them seem to be compatible with my table header (some header cells have subcategories).

I would like to find a solution based on css and/or javascript. Introducing jQuery or similar would make the site much slower (many of the users have radiolink or satellite internet access).

I have copied part of my code to a 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

try this css :

.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>
	<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>

Comments