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