<div  class="datatable">

  <table>

    <thead>

      <tr>

         <th class="th-sm"  >#</th>

        <th class="th-sm">Name</th>

        <th class="th-sm">Position</th>

        <th class="th-sm">Office</th>

        <th class="th-sm">Age</th>

        <th class="th-sm">Start date</th>

        <th class="th-sm">Salary</th>

      </tr>

    </thead>

    <tbody>

      <tr class="accordion-item">

          <td ><button 

                       class="accordion-button"  

                       data-mdb-toggle="collapse" 

                       data-mdb-target="#collapse1" 

                       aria-expanded="false"  

                       aria-controls="collapse1"> </button> </td>

​

        <td>

        <td>Tiger Nixon</td>

        <td>System Architect</td>

        <td>Edinburgh</td>

        <td>61</td>

        <td>2011/04/25</td>

        <td>$320,800</td>

      </tr>

      <tr class="hide-table-padding accordian-body collapse" id="collapse1">

        <td colspan="7">

​

          <div >collapsible content </div>

        </td>

​

      </tr>

      <tr class="accordion-item">

         <td ><button 

                       class="accordion-button"  

                       data-mdb-toggle="collapse" 

                       data-mdb-target="#collapse2" 

                       aria-expanded="false"  

                       aria-controls="collapse2"> </button> </td>

​

        <td>

        <td>Garrett Winters</td>

        <td>Accountant</td>

        <td>Tokyo</td>

        <td>63</td>

        <td>2011/07/25</td>

        <td>$170,750</td>

      </tr>

       <tr class="hide-table-padding accordian-body collapse" id="collapse2">

        <td colspan="7">

​

          <div >collapsible content </div>

        </td>

​

      </tr>

    </tbody>

  </table>

</div>