Responsive Stacking Table

These tables will stack on mobile. Good for tables with higher number of columns and longer text in each cell.

---

                 
                  <h3>Responsive Stacking Table</h3>

<table class="table_data_stack display" role="presentation">
    <thead>
        <tr>
         
            <th>Heading</th>
            <th>Another Heading</th>
            <th>Heading Here</th>
            <th>Fourth</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
            <td data-label="Another Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
            <td data-label="Heading Here">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
      <td data-label="Fourth Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
        </tr>
         <tr>
           <td data-label="Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
            <td data-label="Another Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
            <td data-label="Heading Here">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
 <td data-label="Fourth Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
        </tr>
        <tr>
           <td data-label="Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
            <td data-label="Another Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
            <td data-label="Heading Here">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
 <td data-label="Fourth Heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
        </tr>
        

    </tbody>
</table>