@moodxd/component-table v1.0.3

MoO Table

By default, the thead and tfoot have a gray background with bold text. By default all tbody rows have a 1px gray border-bottom as well.

There are three style class modifiers: .Table--striped, .Table--hover and .Table--condensed. • .Table--striped adds a zebra stripe to the tbody rows • .Table--hover adds a hover state for each tbody row • .Table--condensed overwrites the padding and font-size of th and td elements making each more condensed

Tip: The Table layout requires the thead and tbody elements in order to work correctly. The Table is used only with table html elements. It won’t work with any div that has been assigned the same class as the Table counterparts.

Standard

<table class="Table">
 <thead>
   <tr>
     <th>Test</th>
     <th>Two</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
 </tbody>
</table>

Striped

<table class="Table Table--striped">
 <thead>
   <tr>
     <th>Test</th>
     <th>Two</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
 </tbody>
</table>

Hover

<table class="Table Table--hover">
 <thead>
   <tr>
     <th>Test</th>
     <th>Two</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
 </tbody>
</table>

Condensed

<table class="Table Table--condensed">
 <thead>
   <tr>
     <th>Test</th>
     <th>Two</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
   <tr>
     <td>Test</td>
     <td>Two</td>
   </tr>
 </tbody>
</table>

Responsive

<table class="Table Table--responsive" id="" cellpadding="0" cellspacing="0" border="0">
  <thead>
    <tr>
      <th width="20%" align="center"></th>
      <th width="20%" align="center">Guaranteed Universal Life / Life Plus</th>
      <th width="20%" align="center">AccumUL Plus/ AccumUL Answers</th>
      <th width="20%" align="center">Guaranteed Universal Life Express</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="">Eligible Ages</td>
      <td data-th="Guaranteed Universal Life / Life Plus">18-85</td>
      <td data-th="AccumUL Plus/AccumUL Answers">0-85</td>
      <td data-th="Guaranteed Universal Life Express">18-65</td>
    </tr>
    <tr>
      <td data-th="">Death Benefit Amounts</td>
      <td data-th="Guaranteed Universal Life / Life Plus">$100,000<sup>*</sup> – $1,000,000</td>
      <td data-th="AccumUL Plus/AccumUL Answers">$25,000 – $1,000,000 and above**</td>
      <td data-th="Guaranteed Universal Life Express">$50,000 – $250,000</td>
    </tr>
    <tr>
      <td data-th="">Product Features</td>
      <td data-th="Guaranteed Universal Life / Life Plus">
        <strong>Guaranteed Universal Life</strong>
        <ul>
          <li>Helps you guarantee a death benefit</li>
          <li>Able to add features to customize plan</li>
        </ul>
        <strong>Guaranteed Universal Life Plus</strong>
        <ul>
          <li>Offers enhanced cash value</li>
          <li>Competitive dump-in and short-pay premiums; ideal for 1035 exchanges</li>
          <li>Able to add features to customize plan</li>
        </ul>
      </td>
      <td data-th="AccumUL Plus/AccumUL Answers">
        <ul>
          <li>Helps you accumulate funds for later use (retirement income, education fund) while also providing a death benefit</li>
          <li>Able to add features to customize plan</li>
        </ul>
      </td>
      <td data-th="Guaranteed Universal Life Express">
        <ul>
          <li>Simplified underwriting</li>
          <li>Quick issue process</li>
          <li>Helps you guarantee a death benefit</li>
          <li>Able to add features to customize plan</li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>