Here is the code snippet I am working with:
<table width="100%" class="table-bordered">
<tbody>
<tr>
<td class="font-weight-bold text-center px-1">Sr. No</td>
<td class="font-weight-bold text-center px-1">Item No</td>
<td class="font-weight-bold text-center px-1">Item Details</td>
<td class="font-weight-bold text-center px-1" colspan="4">Instructions</td>
</tr>
<tr>
<td class="text-center px-1" rowspan="5">1</td>
<td class="text-center px-1 border" rowspan="5">1</td>
<td class="text-center px-1">Personal Details</td>
<td class="px-1" colspan="4">
<ul style="list-style: lower-roman;" class="m-0">
<li>This Form is applicable to Resident Indians and there is a separate Form for Non Resident Indians.</li>
<li>Currently, Foreign Nationals / Other Country Individuals (OCI) and Persons of Indian Origin (PIO) are not allowed to open PRAN.</li>
<li>The applicant shall mention father’s name and mother’s name and shall select the option to be printed on PRAN Card.</li>
</ul>
</td>
</tr>
<tr>
<td class="text-center px-1">Spouse Name</td>
<td class="px-1" colspan="4">If married, spouse name is mandatory.</td>
</tr>
<tr>
<td class="text-center px-1">Father's Name</td>
<td class="px-1" colspan="4">
<ul style="list-style: lower-roman;" class="m-0">
<li>Father’s name is mandatory.</li>
<li>If father’s name has more than 30 digits, you may fill Annexure II for the same.</li>
</ul>
</td>
</tr>
<tr>
<td class="text-center px-1">Mother's Name</td>
<td class="px-1" colspan="4"&...
The display result of the above code can be seen in this image: https://i.sstatic.net/4OHgi.png
When using a `colspan`, it seems that the border disappears. Attempting to change `border-collapse` to `separate` helped slightly but created double lines in some areas and single lines elsewhere. Any suggestions or ideas on how to fix this issue?