Govspeak content example

Wide table

Wide tables are enhanced with two features to help users navigate. Left/right indicators are added to show that more content is available to the sides, and a secondary scrollbar is added at the top of the table, that remains at the top of the page as the table is scrolled downwards. This allows users to scroll left/right at any point, which is useful where tables are taller than their browser.

How it looks (preview)

Long place names, courtesy of Wikipedia

Name	Location	Language	Translation
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu	Hill in North Island, New Zealand	Māori	"The summit where Tamatea, the man with the big knees, the climber of mountains, the land-swallower who travelled about, played his kōauau (flute) to his loved one".
Azpilikuetagaraikosaroiarenberekolarrea	Place in Azpilkueta, Navarre, Spain	Basque language	"The low meadow of the sheep pen in upper Azpilikueta".

How to call this example

<%= render "govuk_publishing_components/components/govspeak", {} do %>
  <table>
  <caption>Long place names, courtesy of Wikipedia</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
      <th>Language</th>
      <th>Translation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu</td>
      <td>Hill in North Island, New Zealand</td>
      <td>Māori</td>
      <td>"The summit where Tamatea, the man with the big knees, the climber of mountains, the land-swallower who travelled about, played his kōauau (flute) to his loved one".</td>
    </tr>
    <tr>
      <td>Azpilikuetagaraikosaroiarenberekolarrea</td>
      <td>Place in Azpilkueta, Navarre, Spain</td>
      <td>Basque language</td>
      <td>"The low meadow of the sheep pen in upper Azpilikueta".</td>
    </tr>
  </tbody>
</table>
<% end %>