FEC Pattern Library

Dense table

Dense tables use more compact cell spacing and smaller text sizes.

The .simple-table--display modifier class adds alternating background colors and more padding between the cell content and the top/bottom cell borders.

When to use

  • For tables of contribution limit data
  • When the table of information is very long and inappropriate to break up by pagination
  • For long reference tables where sorting and filtering is unavailable
<div style="padding: 2rem">Standard dense table</div>
<div class="container">
    <table class="simple-table dense-table">
        <thead class="simple-table__header">
            <tr>
                <th class="simple-table__header-cell">Report type</th>
                <th class="simple-table__header-cell">Dates covered</th>
                <th class="simple-table__header-cell">Due</th>
            </tr>
        </thead>
        <tbody>
            <tr class="simple-table__row">
                <td class="simple-table__cell">April Quarterly <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">January 1 through March 31</td>
                <td class="simple-table__cell">April 15</td>
            </tr>
            <tr class="simple-table__row">
                <td class="simple-table__cell">July Quarterly <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">April 1 through June 30</td>
                <td class="simple-table__cell">July 15</td>
            </tr>
            <tr class="simple-table__row">
                <td class="simple-table__cell">October Quarterly <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">July 1 through September 30</td>
                <td class="simple-table__cell">October 15</td>
            </tr>
            <tr class="simple-table__row">
                <td class="simple-table__cell">Year-End <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">October 1 through December 31 of non-election year; Close of books of last report filed (October quarterly or Post-general) through December 31 of election year</td>
                <td class="simple-table__cell">January 31 of following year</td>
            </tr>
        </tbody>
    </table>
</div>

<div style="padding: 2rem">Dense table with display</div>
<div class="container">
    <table class="simple-table simple-table--display dense-table">
        <thead class="simple-table__header">
            <tr>
                <th class="simple-table__header-cell">Report type</th>
                <th class="simple-table__header-cell">Dates covered</th>
                <th class="simple-table__header-cell">Due</th>
            </tr>
        </thead>
        <tbody>
            <tr class="simple-table__row">
                <td class="simple-table__cell">April Quarterly <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">January 1 through March 31</td>
                <td class="simple-table__cell">April 15</td>
            </tr>
            <tr class="simple-table__row">
                <td class="simple-table__cell">July Quarterly <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">April 1 through June 30</td>
                <td class="simple-table__cell">July 15</td>
            </tr>
            <tr class="simple-table__row">
                <td class="simple-table__cell">October Quarterly <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">July 1 through September 30</td>
                <td class="simple-table__cell">October 15</td>
            </tr>
            <tr class="simple-table__row">
                <td class="simple-table__cell">Year-End <br>(Form 3, 3Z, 3L)</td>
                <td class="simple-table__cell">October 1 through December 31 of non-election year; Close of books of last report filed (October quarterly or Post-general) through December 31 of election year</td>
                <td class="simple-table__cell">January 31 of following year</td>
            </tr>
        </tbody>
    </table>
</div>
 
<div style="padding: 2rem">Standard dense table</div>
<div class="container">
  <table class="simple-table dense-table">
    <thead class="simple-table__header">
    <tr>
      <th class="simple-table__header-cell">Report type</th>
      <th class="simple-table__header-cell">Dates covered</th>
      <th class="simple-table__header-cell">Due</th>
    </tr>
    </thead>
    <tbody>
      <tr class="simple-table__row">
        <td class="simple-table__cell">April Quarterly <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">January 1 through March 31</td>
        <td class="simple-table__cell">April 15</td>
      </tr>
      <tr class="simple-table__row">
        <td class="simple-table__cell">July Quarterly <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">April 1 through June 30</td>
        <td class="simple-table__cell">July 15</td>
      </tr>
      <tr class="simple-table__row">
        <td class="simple-table__cell">October Quarterly <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">July 1 through September 30</td>
        <td class="simple-table__cell">October 15</td>
      </tr>
      <tr class="simple-table__row">
        <td class="simple-table__cell">Year-End  <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">October 1 through December 31 of non-election year; Close of books of last report filed (October quarterly or Post-general)  through December 31 of election year</td>
        <td class="simple-table__cell">January 31 of following year</td>
      </tr>
    </tbody>
  </table>
</div>

<div style="padding: 2rem">Dense table with display</div>
<div class="container">
  <table class="simple-table simple-table--display dense-table">
    <thead class="simple-table__header">
    <tr>
      <th class="simple-table__header-cell">Report type</th>
      <th class="simple-table__header-cell">Dates covered</th>
      <th class="simple-table__header-cell">Due</th>
    </tr>
    </thead>
    <tbody>
      <tr class="simple-table__row">
        <td class="simple-table__cell">April Quarterly <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">January 1 through March 31</td>
        <td class="simple-table__cell">April 15</td>
      </tr>
      <tr class="simple-table__row">
        <td class="simple-table__cell">July Quarterly <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">April 1 through June 30</td>
        <td class="simple-table__cell">July 15</td>
      </tr>
      <tr class="simple-table__row">
        <td class="simple-table__cell">October Quarterly <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">July 1 through September 30</td>
        <td class="simple-table__cell">October 15</td>
      </tr>
      <tr class="simple-table__row">
        <td class="simple-table__cell">Year-End  <br>(Form 3, 3Z, 3L)</td>
        <td class="simple-table__cell">October 1 through December 31 of non-election year; Close of books of last report filed (October quarterly or Post-general)  through December 31 of election year</td>
        <td class="simple-table__cell">January 31 of following year</td>
      </tr>
    </tbody>
  </table>
</div>
 
/* No context defined. */
  • Handle: @dense-table
  • Preview:
  • Filesystem Path: components/02-components/tables/02-dense-table/dense-table.html