Table of Contents

How to create html fold table

HTML , CSS & JS Code

<style>

	/* fold table */
    table.fold-table > tbody > tr.view td,
    table.fold-table > tbody > tr.view th {
      cursor: pointer;
    }
    table.fold-table > tbody > tr.view td:first-child,
    table.fold-table > tbody > tr.view th:first-child {
      position: relative;
      padding-left: 20px;
    }
    table.fold-table > tbody > tr.view td:first-child:before,
    table.fold-table > tbody > tr.view th:first-child:before {
      position: absolute;
      top: 50%;
      left: 5px;
      width: 9px;
      height: 16px;
      margin-top: -8px;
      content: "▼";
      transition: all 0.3s ease;
    }
    table.fold-table > tbody > tr.view:nth-child(4n-1) {
      background: #eee;
    }
    table.fold-table > tbody > tr.view:hover {
      background: #fff;
    }
    table.fold-table > tbody > tr.view.open {
      background: tomato;
      color: white !important;
    }
    table.fold-table > tbody > tr.view.open td:first-child:before,
    table.fold-table > tbody > tr.view.open th:first-child:before {
      transform: rotate(-180deg);
      color: #333;
    }
    table.fold-table > tbody > tr.fold {
      display: none;
    }
    table.fold-table > tbody > tr.fold.open {
      display: table-row;
    }

    .fold-content {
      padding: 0.5em;
    }
    .fold-content h3 {
      margin-top: 0;
    }
    .fold-content > table {
      border: 2px solid #ccc;
    }
    .fold-content > table > tbody tr:nth-child(even) {
      background: #eee;
    }


</style>



<table class="fold-table">
  <thead>
    <tr>
      <th>Date</th>
      <th>Status</th>
      <th>Checkin</th>
      <th>Checkout</th>
      <th>Time Worked</th>
      <th>Comments</th>
    </tr>
  </thead>
  <tbody>

    <tr class="view">
      <td>2022 / 03/ 02</td>
      <td> Present </td>
      <td> 09:00 </td>
      <td> 06: 30 </td>
      <td> 09: 30 </td>
      <td> Well </td>
    </tr>
    <tr class="fold">
      <td colspan="7">
        <div class="fold-content">
          <table class="widefat">
            <thead>
               <tr>
                <th>Company</th>
                <th>Number</th>
                <th>Name</th>
                <th>Group A</th>
                <th>Group B</th>
                <th>Comments</th>
               </tr>
            </thead>
            <tbody>																		
              <tr>
                <td>Sony</td>
                <td>13245</td>
                <td>John Doe</td>
                <td>064578</td>
                <td>A, 100%</td>
                <td class="cur">20000</td>
              </tr>
              <tr>
                <td>Sony</td>
                <td>13288</td>
                <td>Claire Bennet</td>
                <td>064877</td>
                <td>B, 100%</td>
                <td class="cur">28000</td>
              </tr>
              <tr>
                <td>Sony</td>
                <td>12341</td>
                <td>Barry White</td>
                <td>064123</td>
                <td>A, 100%</td>
                <td class="cur">10000</td>
              </tr>
            </tbody>																																																																																													
          </table>          
        </div>
      </td>
    </tr>
        
     <tr class="view">
      <td>2022 / 03/ 02</td>
      <td> Present </td>
      <td> 09:00 </td>
      <td> 06: 30 </td>
      <td> 09: 30 </td>
      <td> Well </td>
    </tr>
    <tr class="fold">
      <td colspan="7">
        <div class="fold-content">
          <table>
            <thead>
               <tr>
                <th>Company</th>
                <th>Number</th>
                <th>Name</th>
                <th>Group A</th>
                <th>Group B</th>
                <th>Comments</th>
               </tr>
            </thead>
            <tbody>																		
              <tr>
                <td>Sony</td>
                <td>13245</td>
                <td>John Doe</td>
                <td>064578</td>
                <td>A, 100%</td>
                <td class="cur">20000</td>
              </tr>
              <tr>
                <td>Sony</td>
                <td>13288</td>
                <td>Claire Bennet</td>
                <td>064877</td>
                <td>B, 100%</td>
                <td class="cur">28000</td>
              </tr>
              <tr>
                <td>Sony</td>
                <td>12341</td>
                <td>Barry White</td>
                <td>064123</td>
                <td>A, 100%</td>
                <td class="cur">10000</td>
              </tr>
            </tbody>																																																																																													
          </table>          
        </div>
      </td>
    </tr>

  </tbody>
</table>


<script>
  $(function(){
    $(".fold-table tr.view").on("click", function(){
      $(this).toggleClass("open").next(".fold").toggleClass("open");
    });
  });
</script>

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Leave a Comment

Your email address will not be published.

Related Posts