My datatable is causing me trouble as I try to add more rows in the td after the Name column. The rows are not aligning properly, and I need a solution.
I want these new rows to be aligned with each other, but the number of rows may vary based on user input.
I've attempted to use rowspan, but it's proving to be ineffective. My design is just a sample, so feel free to suggest your own ideas. However, my current solution is not achieving the desired alignment.
table, td, tr {
border: 1px solid black;
}
table {
border-collapse: collapse;
}<table class="table table-bordered table-striped table-hover datatable datatable-Room" style="width: 100%">
<thead>
<tr>
<th>Name</th>
<th>Plan Name</th>
<th>Plan Period</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#">John</a>
</td>
<td>
<div>Some Plan</div>
<hr>
<div>Some Plan</div>
</td>
<td class="p-0">
<div>Aug 02, 2021 - Aug 20, 2021</div>
<div>Weekly</div>
<hr>
<div>Aug 10, 2021 - Sep 20, 2021</div>
<div>Monthly</div>
</td>
<td class="p-0">
<div>$30</div>
<hr>
<div>$45</div>
</td>
</tr>
<tr>
<td>
<a href="#">John</a>
</td>
<td>
<div></div>
<hr>
<div>Some Plan</div>
</td>
<td class="p-0">
<div>Aug 02, 2021 - Aug 20, 2021</div>
<div>Weekly</div>
<hr>
<div>Aug 10, 2021 - Sep 20, 2021</div>
<div>Monthly</div>
</td>
<td class="p-0">
<div>$30</div>
<hr>
<div>$45</div>
</td>
</tr>
</tbody>
</table>