<figure class="table">
    <table>
        <thead>
            <tr>
                <td></td>
                <th>Water Body</th>
                <th>County</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Crow's Nest Natural Area Preserve</th>
                <td>Accokeek Creek</td>
                <td>Stafford</td>
                <td>Boating (with ADA accessible paddle craft access)</td>
            </tr>
            <tr>
                <th>Menokin Landing</th>
                <td>Cat Point Creek</td>
                <td>Richmond</td>
                <td>Boating (with paddle craft access)</td>
            </tr>
            <tr>
                <th>Fort Young Park</th>
                <td>Jackson River</td>
                <td>Alleghany</td>
                <td>Boating (with paddle craft access)</td>
            </tr>
            <tr>
                <th>Glen Wilton Park</th>
                <td>James River</td>
                <td>Botetourt</td>
                <td>Boating (with paddle craft access)</td>
            </tr>
            <tr>
                <th>James River Beach Park</th>
                <td>James River</td>
                <td>James City</td>
                <td>Beach use, boating (with paddle craft access) and swimming</td>
            </tr>
            <tr>
                <th>King and Queen County Fishing Pier</th>
                <td>Mattaponi River</td>
                <td>King and Queen</td>
                <td>Fishing (with pier)</td>
            </tr>
            <tr>
                <th>Lake Ridge Marina</th>
                <td>Occoquan River</td>
                <td>Prince William</td>
                <td>Boating (with ADA accessible paddle craft access)</td>
            </tr>
            <tr>
                <th>Leesylvania State Park</th>
                <td>Potomac River</td>
                <td>Prince William</td>
                <td>Boating (with paddle-in access for camping)</td>
            </tr>
            <tr>
                <th>Westmoreland State Park</th>
                <td>Potomac River</td>
                <td>Westmoreland</td>
                <td>Boating (with paddle-in access for camping)</td>
            </tr>
            <tr>
                <th>Port Royal Landing</th>
                <td>Rappahannock River</td>
                <td>Caroline</td>
                <td>Boating and fishing (with paddle craft access and ADA accessible fishing pier)</td>
            </tr>
        </tbody>
    </table>
    <figcaption>Virginia</figcaption>
</figure>

<link media="all" rel="stylesheet" href="/table/table.css" />
<script src="/table/table.js"></script>
<figure class="table">
  <table>
    <thead>
    <tr>
      <td></td>
      <th>Water Body</th>
      <th>County</th>
      <th>Description</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th>Crow's Nest Natural Area Preserve</th>
      <td>Accokeek Creek</td>
      <td>Stafford</td>
      <td>Boating (with ADA accessible paddle craft access)</td>
    </tr>
    <tr>
      <th>Menokin Landing</th>
      <td>Cat Point Creek</td>
      <td>Richmond</td>
      <td>Boating (with paddle craft access)</td>
    </tr>
    <tr>
      <th>Fort Young Park</th>
      <td>Jackson River</td>
      <td>Alleghany</td>
      <td>Boating (with paddle craft access)</td>
    </tr>
    <tr>
      <th>Glen Wilton Park</th>
      <td>James River</td>
      <td>Botetourt</td>
      <td>Boating (with paddle craft access)</td>
    </tr>
    <tr>
      <th>James River Beach Park</th>
      <td>James River</td>
      <td>James City</td>
      <td>Beach use, boating (with paddle craft access) and swimming</td>
    </tr>
    <tr>
      <th>King and Queen County Fishing Pier</th>
      <td>Mattaponi River</td>
      <td>King and Queen</td>
      <td>Fishing (with pier)</td>
    </tr>
    <tr>
      <th>Lake Ridge Marina</th>
      <td>Occoquan River</td>
      <td>Prince William</td>
      <td>Boating (with ADA accessible paddle craft access)</td>
    </tr>
    <tr>
      <th>Leesylvania State Park</th>
      <td>Potomac River</td>
      <td>Prince William</td>
      <td>Boating (with paddle-in access for camping)</td>
    </tr>
    <tr>
      <th>Westmoreland State Park</th>
      <td>Potomac River</td>
      <td>Westmoreland</td>
      <td>Boating (with paddle-in access for camping)</td>
    </tr>
    <tr>
      <th>Port Royal Landing</th>
      <td>Rappahannock River</td>
      <td>Caroline</td>
      <td>Boating and fishing (with paddle craft access and ADA accessible fishing pier)</td>
    </tr>
    </tbody>
  </table>
  <figcaption>Virginia</figcaption>
</figure>

{% import "_macros.twig" as h %}
{{ h.componentAssets('table') }}
/* No context defined. */
  • Content:
    @use "../_layout/mixins";
    
    %table {
      background: var(--neutral--light);
      border: 2px solid var(--neutral--darker);
      border-collapse: collapse;
    
      th {
        background: var(--neutral--darker);
        color: var(--white);
        border: 1px solid var(--neutral--light);
      }
      td {
        border: 1px solid var(--neutral--darker);
      }
      td, th {
        padding: 0.7em;
      }
    }
    %tableCaption {
      display: table-caption;
      caption-side: top;
      line-height: 1.1;
      font-weight: var(--bold-weight);
      font-size: var(--step-1);
    }
    
    .table {
      @include mixins.figure();
      display: table;
      border-spacing: 0 0.5em;
    
      table {
        @extend %table;
      }
      figcaption {
        @extend %tableCaption;
      }
    }
    
    .table__table {
      @extend %table;
    }
    .table__caption {
      @extend %tableCaption;
    }
  • URL: /components/raw/table/table.scss
  • Filesystem Path: src/components/table/table.scss
  • Size: 757 Bytes

No notes defined.