Scrollable pane
<div class="moj-scrollable-pane">
<table class="govuk-table">
<caption class="govuk-table__caption">Historic rainfall in June</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header">Station</th>
<th scope="col" class="govuk-table__header">2022</th>
<th scope="col" class="govuk-table__header">2021</th>
<th scope="col" class="govuk-table__header">2020</th>
<th scope="col" class="govuk-table__header">2019</th>
<th scope="col" class="govuk-table__header">2018</th>
<th scope="col" class="govuk-table__header">2017</th>
<th scope="col" class="govuk-table__header">2016</th>
<th scope="col" class="govuk-table__header">2015</th>
<th scope="col" class="govuk-table__header">2014</th>
<th scope="col" class="govuk-table__header">2013</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">Lerwick</td>
<td class="govuk-table__cell">13.7mm</td>
<td class="govuk-table__cell">13.8mm</td>
<td class="govuk-table__cell">13.9mm</td>
<td class="govuk-table__cell">12.7mm</td>
<td class="govuk-table__cell">13.3mm</td>
<td class="govuk-table__cell">13.3mm</td>
<td class="govuk-table__cell">12.9mm</td>
<td class="govuk-table__cell">11.2mm</td>
<td class="govuk-table__cell">13.3mm</td>
<td class="govuk-table__cell">12.7mm</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Eskdalemuir</td>
<td class="govuk-table__cell">17.0mm</td>
<td class="govuk-table__cell">17.9mm</td>
<td class="govuk-table__cell">17.2mm</td>
<td class="govuk-table__cell">16.2mm</td>
<td class="govuk-table__cell">19.7mm</td>
<td class="govuk-table__cell">16.4mm</td>
<td class="govuk-table__cell">17.6mm</td>
<td class="govuk-table__cell">15.7mm</td>
<td class="govuk-table__cell">17.8mm</td>
<td class="govuk-table__cell">16.9mm</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Valley</td>
<td class="govuk-table__cell">17.5mm</td>
<td class="govuk-table__cell">17.4mm</td>
<td class="govuk-table__cell">17.9mm</td>
<td class="govuk-table__cell">17.1mm</td>
<td class="govuk-table__cell">20.2mm</td>
<td class="govuk-table__cell">17.6mm</td>
<td class="govuk-table__cell">18.0mm</td>
<td class="govuk-table__cell">16.6mm</td>
<td class="govuk-table__cell">18.0mm</td>
<td class="govuk-table__cell">17.5mm</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Heathrow</td>
<td class="govuk-table__cell">23.2mm</td>
<td class="govuk-table__cell">22.5mm</td>
<td class="govuk-table__cell">22.5mm</td>
<td class="govuk-table__cell">21.8mm</td>
<td class="govuk-table__cell">24.2mm</td>
<td class="govuk-table__cell">24.0mm</td>
<td class="govuk-table__cell">20.7mm</td>
<td class="govuk-table__cell">22.2mm</td>
<td class="govuk-table__cell">22.1mm</td>
<td class="govuk-table__cell">20.3mm</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Hurn</td>
<td class="govuk-table__cell">21.0mm</td>
<td class="govuk-table__cell">20.7mm</td>
<td class="govuk-table__cell">20.7mm</td>
<td class="govuk-table__cell">19.9mm</td>
<td class="govuk-table__cell">22.9mm</td>
<td class="govuk-table__cell">21.9mm</td>
<td class="govuk-table__cell">19.6mm</td>
<td class="govuk-table__cell">20.5mm</td>
<td class="govuk-table__cell">21.1mm</td>
<td class="govuk-table__cell">19.6mm</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Camborne</td>
<td class="govuk-table__cell">17.9mm</td>
<td class="govuk-table__cell">17.4mm</td>
<td class="govuk-table__cell">17.1mm</td>
<td class="govuk-table__cell">16.5mm</td>
<td class="govuk-table__cell">19.7mm</td>
<td class="govuk-table__cell">18.0mm</td>
<td class="govuk-table__cell">17.0mm</td>
<td class="govuk-table__cell">16.8mm</td>
<td class="govuk-table__cell">17.8mm</td>
<td class="govuk-table__cell">15.9mm</td>
</tr>
</tbody>
</table>
</div>
{%- from "govuk/components/table/macro.njk" import govukTable -%}
<div class="moj-scrollable-pane">
{{ govukTable({
caption: "Historic rainfall in June",
head: [
{
text: "Station"
},
{
text: "2022"
},
{
text: "2021"
},
{
text: "2020"
},
{
text: "2019"
},
{
text: "2018"
},
{
text: "2017"
},
{
text: "2016"
},
{
text: "2015"
},
{
text: "2014"
},
{
text: "2013"
}
],
rows: [
[
{
text: "Lerwick"
},
{
text: "13.7mm"
},
{
text: "13.8mm"
},
{
text: "13.9mm"
},
{
text: "12.7mm"
},
{
text: "13.3mm"
},
{
text: "13.3mm"
},
{
text: "12.9mm"
},
{
text: "11.2mm"
},
{
text: "13.3mm"
},
{
text: "12.7mm"
}
],
[
{
text: "Eskdalemuir"
},
{
text: "17.0mm"
},
{
text: "17.9mm"
},
{
text: "17.2mm"
},
{
text: "16.2mm"
},
{
text: "19.7mm"
},
{
text: "16.4mm"
},
{
text: "17.6mm"
},
{
text: "15.7mm"
},
{
text: "17.8mm"
},
{
text: "16.9mm"
}
],
[
{
text: "Valley"
},
{
text: "17.5mm"
},
{
text: "17.4mm"
},
{
text: "17.9mm"
},
{
text: "17.1mm"
},
{
text: "20.2mm"
},
{
text: "17.6mm"
},
{
text: "18.0mm"
},
{
text: "16.6mm"
},
{
text: "18.0mm"
},
{
text: "17.5mm"
}
],
[
{
text: "Heathrow"
},
{
text: "23.2mm"
},
{
text: "22.5mm"
},
{
text: "22.5mm"
},
{
text: "21.8mm"
},
{
text: "24.2mm"
},
{
text: "24.0mm"
},
{
text: "20.7mm"
},
{
text: "22.2mm"
},
{
text: "22.1mm"
},
{
text: "20.3mm"
}
],
[
{
text: "Hurn"
},
{
text: "21.0mm"
},
{
text: "20.7mm"
},
{
text: "20.7mm"
},
{
text: "19.9mm"
},
{
text: "22.9mm"
},
{
text: "21.9mm"
},
{
text: "19.6mm"
},
{
text: "20.5mm"
},
{
text: "21.1mm"
},
{
text: "19.6mm"
}
],
[
{
text: "Camborne"
},
{
text: "17.9mm"
},
{
text: "17.4mm"
},
{
text: "17.1mm"
},
{
text: "16.5mm"
},
{
text: "19.7mm"
},
{
text: "18.0mm"
},
{
text: "17.0mm"
},
{
text: "16.8mm"
},
{
text: "17.8mm"
},
{
text: "15.9mm"
}
]
]
}) }}
</div>
When to use
Use the scrollable pane component when you have content (typically tables) which unavoidably overflowing the page. It adds scroll shadows to indicate that content overflows the page.
This is often used in the filter a list pattern as the filter takes up additional horizontal space, causing the pane holding the table to shrink.
When not to use
Before using this, try to avoid having content that overflows the page at all. Users should be able to see all of the page's content without needing to scroll, so this component should only be used when absolutely necessary.
Do not use this component to contain tables which have multi-line text. It will not allow the content to overflow vertically.