Responsive Table

by Donna Torr

HTML

<table class="dcf-table dcf-table-responsive dcf-table-bordered dcf-table-striped dcf-w-100%">
    <thead>
      <tr>
        <th scope="col">Measured Pipe Circ.</th>
        <th scope="col">Measured Diameter</th>
        <th scope="col">Insulation Width</th>
        <th scope="col">Comparable Pipe Sizes</th>
        <th scope="col">List Price per Foot</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Measured Pipe Circ.">.5" to 1.5" Circ.</td>
        <td data-label="Measured Diameter">1/8" - 1/2"</td>
        <td data-label="Insulation Width">4" Wide</td>
        <td data-label="Comparable Pipe Sizes">3/8" Tracer wrap</td>
        <td data-label="List Price per Foot">8.72</td>
      </tr>
      <tr>
        <td data-label="Measured Pipe Circ.">1.5" to 2.5" Circ.</td>
        <td data-label="Measured Diameter">1/2" - 3/4"</td>
        <td data-label="Insulation Width">5" Wide</td>
        <td data-label="Comparable Pipe Sizes">1/2" 'T' wrap</td>
        <td data-label="List Price per Foot">9.12</td>
      </tr>
      <tr>
        <td data-label="Measured Pipe Circ.">2.5" to 3.5" Circ.</td>
        <td data-label="Measured Diameter">3/4" - 1 1/8"</td>
        <td data-label="Insulation Width">6" Wide</td>
        <td data-label="Comparable Pipe Sizes">3/4" 'T' wrap</td>
        <td data-label="List Price per Foot">9.79</td>
      </tr>
      <tr>
        <td data-label="Measured Pipe Circ.">3.5" to 4.5" Circ.</td>
        <td data-label="Measured Diameter">1 1/8" - 1 1/2"</td>
        <td data-label="Insulation Width">7" Wide</td>
        <td data-label="Comparable Pipe Sizes">1" 'T' wrap</td>
        <td data-label="List Price per Foot">10.64</td>
      </tr>
      <tr>
        <td data-label="Measured Pipe Circ.">4.5" to 5.5" Circ.</td>
        <td data-label="Measured Diameter">1 1/2" - 1 3/4"</td>
        <td data-label="Insulation Width">8" Wide</td>
        <td data-label="Comparable Pipe Sizes">1 1/4" 'T' wrap</td>
        <td...

CSS

:root {
    --bg-table-stripe: #f6f6f5;
    --b-table: #e3e3e2;
    --caption: #242423;
}

table {
    background-color: transparent;
    border-collapse:collapse;
  	font-family: Arial, Helvetica, sans-serif
}

th {
    text-align:left
}

.dcf-txt-center {
      text-align: center!important
    }

    .dcf-txt-left {
      text-align: left!important
    }

    .dcf-txt-right {
      text-align: right!important
    }
    
.dcf-table caption {
      color: var(--caption);
      font-size: 1.13em;
      font-weight: 700;
      padding-bottom: .56rem
    }

    .dcf-table thead {
      font-size: .84em
    }

    .dcf-table tbody {
      border-bottom: 1px solid var(--b-table);
      border-top: 1px solid var(--b-table);
      font-size: .84em
    }

    .dcf-table tfoot {
      font-size: .84em
    }

    .dcf-table td, .dcf-table th {
      padding-right: 1.78em
    }

    .dcf-table-bordered, .dcf-table-bordered td, .dcf-table-bordered th {
      border: 1px solid var(--b-table)
    }

    .dcf-table-bordered td, .dcf-table-bordered th, .dcf-table-striped td, .dcf-table-striped th {
      padding-left: 1em;
      padding-right: 1em
    }

    .dcf-table-bordered tr:not(:last-child), .dcf-table-striped tr:not(:last-child) {
      border-bottom: 1px solid var(--b-table)
    }

    .dcf-table-striped tbody tr:nth-of-type(2n) {
      background-color: var(--bg-table-stripe)
    }

    .dcf-table thead td, .dcf-table thead th {
      padding-bottom: .75em;
      vertical-align: bottom
    }

    .dcf-table tbody td, .dcf-table tbody th, .dcf-table tfoot td, .dcf-table tfoot th {
      padding-top: .75em;
      vertical-align: top
    }

    .dcf-table tbody td, .dcf-table tbody th {
      padding-bottom: .75em
    }

    .dcf-table-bordered thead th {
      padding-top: 1.33em
    }

    .dcf-wrapper-table-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      left: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
     ...