Responsive tables used within page content.

Example

---

Macro

{{ responsiveTable({
    tableClasses: 'nhsuk-hee-table nhsuk-hee-table--multicols',
    responsive: true,
    panel: false,
    caption: "Online interview overview",
    firstCellIsHeader: false,
    head: [
      {
        text: "Area"
      },
      {
        text: "Raw marks by panel member"
      },
      {
        text: "Total marks"
      },
      {
        text: "Percentage of final score %"
      }
    ],
    rows: [
      [
        {
          header: "Area",
          html: "Clinical prioritisation"
        },
        {
          header: "Raw marks by panel member",
          html: "20"
        },
        {
          header: "Total marks",
          html: "40"
        },
        {
          header: "Percentage of final score %",
          html: "26.64"
        }
      ],
      [
        {
          header: "Area",
          html: "<p>Score: 5</p><p>By December 2022, I have completed a quality improvement project (QIP) or complete audit cycle (for example,&nbsp;first audit/project, action plan and re-audit/assessment to quantify impact of intervention) which has resulted in national change</p>"
        },
        {
          header: "Raw marks by panel member",
          html: "20"
        },
        {
          header: "Total marks",
          html: "40"
        },
        {
          header: "Percentage of final score %",
          html: "26.64"
        }
      ],
      [
        {
          header: "Area",
          html: "Clinical prioritisation"
        },
        {
          header: "Raw marks by panel member",
          html: "20"
        },
        {
          header: "Total marks",
          html: "40"
        },
        {
          header: "Percentage of final score %",
          html: "26.64"
        }
      ],
      [
        {
          header: "Area",
          html: "Clinical prioritisation"
        },
        {
          header: "Raw marks by panel member",
          html: "20"
        },
        {
          header: "Total marks",
          html: "40"
        },
        {
          header: "Percentage of final score %",
          html: "26.64"
        }
      ]
    ]
  })}}
  

---

HTML

  <table role="table" class="nhsuk-table-responsive nhsuk-hee-table nhsuk-hee-table--multicols has-caption">
    <caption class="nhsuk-table__caption">Online interview overview</caption>
    <thead role="rowgroup" class="nhsuk-table__head">
      <tr role="row">
        <th role="columnheader" class="" scope="col"> Area </th>
        <th role="columnheader" class="" scope="col"> Raw marks by panel member </th>
        <th role="columnheader" class="" scope="col"> Total marks </th>
        <th role="columnheader" class="" scope="col"> Percentage of final score % </th>
      </tr>
    </thead>
    <tbody class="nhsuk-table__body">
      <tr role="row" class="nhsuk-table__row">
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Area </span>
          <div class="nhsuk-table__cell__container">Clinical prioritisation</div>
        </td>
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Raw marks by panel member </span>
          <div class="nhsuk-table__cell__container">20</div>
        </td>
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Total marks </span>
          <div class="nhsuk-table__cell__container">40</div>
        </td>
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Percentage of final score % </span>
          <div class="nhsuk-table__cell__container">26.64</div>
        </td>
      </tr>
      <tr role="row" class="nhsuk-table__row">
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Area </span>
          <div class="nhsuk-table__cell__container">
            <p>Score: 5</p>
            <p>By December 2022, I have completed a quality improvement project (QIP) or complete audit cycle (for example,&nbsp;first audit/project, action plan and re-audit/assessment to quantify impact of intervention) which has resulted in national change</p>
          </div>
        </td>
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Raw marks by panel member </span>
          <div class="nhsuk-table__cell__container">20</div>
        </td>
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Total marks </span>
          <div class="nhsuk-table__cell__container">40</div>
        </td>
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Percentage of final score % </span>
          <div class="nhsuk-table__cell__container">26.64</div>
        </td>
      </tr>
      <tr role="row" class="nhsuk-table__row">
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Area </span>
          <div class="nhsuk-table__cell__container">Clinical prioritisation</div>
        </td>
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Raw marks by panel member </span>
          <div class="nhsuk-table__cell__container">20</div>
        </td>
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Total marks </span>
          <div class="nhsuk-table__cell__container">40</div>
        </td>
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Percentage of final score % </span>
          <div class="nhsuk-table__cell__container">26.64</div>
        </td>
      </tr>
      <tr role="row" class="nhsuk-table__row">
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Area </span>
          <div class="nhsuk-table__cell__container">Clinical prioritisation</div>
        </td>
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Raw marks by panel member </span>
          <div class="nhsuk-table__cell__container">20</div>
        </td>
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Total marks </span>
          <div class="nhsuk-table__cell__container">40</div>
        </td>
        <td role="cell" class="nhsuk-table__cell">
          <span class="nhsuk-table-responsive__heading">Percentage of final score % </span>
          <div class="nhsuk-table__cell__container">26.64</div>
        </td>
      </tr>
    </tbody>
  </table>