dxw style

Tables 

<div class="grid-container">
    <div class="column-full">
        <table>
            <caption class="h4">Dates and amounts</caption>
            <tbody>
                <tr>
                    <td>First 6 weeks</td>
                    <td>£109.80 per week</td>
                </tr>
                <tr>
                    <td>Next 33 weeks</td>
                    <td>£109.80 per week</td>
                </tr>
                <tr>
                    <td>Total estimated pay</td>
                    <td>£4,282.20</td>
                </tr>
                <tr>
                    <td>Tell the mother’s employer</td>
                    <td>28 days before they want to start maternity pay</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
 
<div class="grid-container">
  <div class="column-full">
    <table>
      <caption class="h4">Dates and amounts</caption>
      <tbody>
        <tr>
          <td>First 6 weeks</td>
          <td>£109.80 per week</td>
        </tr>
        <tr>
          <td>Next 33 weeks</td>
          <td>£109.80 per week</td>
        </tr>
        <tr>
          <td>Total estimated pay</td>
          <td>£4,282.20</td>
        </tr>
        <tr>
          <td>Tell the mother’s employer</td>
          <td>28 days before they want to start maternity pay</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;

  th,
  td {
    padding: $medium-spacing $medium-spacing $medium-spacing 0;
    text-align: left;
    color: $black;
    border-bottom: 1px solid $grey-3;
  }

  th {
    font-weight: 700;
  }

  // Right align table header cells and table cells with a numeric class
  .numeric {
    text-align: right;
  }

}

// .table-font-xsmall {
//   th {
//     @include bold-16;
//   }
//
//   td {
//     @include core-16;
//   }
//
//   th,
//   td {
//     padding: em(12, 16) em(20, 16) em(9, 16) 0;
//   }
// }
  • URL: /components/raw/tables/tables.scss
  • Filesystem Path: components/typography/tables/tables.scss
  • Size: 582 Bytes

There are no notes for this item.