I have to display table on "read more" content

Question

I have to design "read more" and "read less" button on page to read more content but I have to display table inside "read more" content.

 

I have code

<div>
  <input type="checkbox" class="read-more-state" id="post-1" />

  <p class="read-more-wrap"><div class="table">
        <table width="680" border="1" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <th valign="top" style="width: 150px;" align="left">
                        Particulars
                    </th>
                    <th valign="top" style="width: 150px" align="left">
                        Disclosures
                    </th>
                </tr>
                <tr>
                    <td align="left" valign="top">
                        Date of Appointment & term of appointment
                    </td>
                    <td align="left" valign="top">
                        W.e.f.01st October, 2018, 5 years
                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top">
                        Date of Birth and Age
                    </td>
                    <td align="left" valign="top">
                        10th February, 1962, 56 years.
                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top">
                        Qualification
                    </td>
                    <td align="left" valign="top">
                        B.Com.
                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top">
                        Date of first appointment
                    </td>
                    <td align="left" valign="top">
                        02nd June, 1992
                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top">
                        Shareholding in the Company
                    </td>
                    <td align="left" valign="top">
                        18,57,485 Ordinary Equity Shares and 92,873 DVR Equity Shares
                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top">
                        Disclosure of relationships between Directors
                    </td>
                    <td align="left" valign="top">
                        Shri Ashok B. Jain, Shri Anil B. Jain, Shri Ajit B. Jain and Shri Atul B. Jain are
                        brothers and related to each other.
                    </td>
                </tr>
            </tbody>
        </table>
    </div></span></p>

  <label for="post-1" class="read-more-trigger"></label>
</div>

<div>
  <input type="checkbox" class="read-more-state" id="post-2" />

  <ul class="read-more-wrap">
    <li>lorem</li>
    <li>lorem 2</li>
    <li class="read-more-target">lorem 3</li>
    <li class="read-more-target">lorem 4</li>
  </ul>

  <label for="post-2" class="read-more-trigger"></label>
</div>