如何在 table 的 td 中添加额外的相同高度行

Question

我有数据表，我想在td中的Name列后添加更多行，可以是一个，两个或更多。问题是行之间没有对齐。

我如何制作这样的结构，以便这些数据彼此对齐。我可以使用 rowspan 但行数不是静态的，可以添加或删除

我设计了这个作为示例，你可以有自己的想法，我脑子里只有这个解决方案，但它不起作用

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></div>
        
        <hr>
        
        <div></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></div>
        
        <hr>
        
        <div></div>
      </td>

    </tr>
  </tbody>
</table>

Answer 1

这是你想要的吗？

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 rowspan="2"><a href="#">John</a></td>
      <td>Some Plan</td>
      <td class="p-0">
        <div>Aug 02, 2021 - Aug 20, 2021</div>
        <div>Weekly</div>
      </td>
      <td class="p-0">
        <div></div>
      </td>
    </tr>
     
    <tr>
      <td>Some Plan</td>
      <td class="p-0">
        <div>Aug 10, 2021 - Sep 20, 2021</div>
        <div>Monthly</div>
      </td>
      <td class="p-0">
        <div></div>
      </td>
    </tr>
     
    <tr>
      <td rowspan="2"><a href="#">John</a></td>
      <td></td>
      <td class="p-0">
        <div>Aug 02, 2021 - Aug 20, 2021</div>
        <div>Weekly</div>
      </td>
      <td class="p-0">
        <div></div>
      </td>
    </tr>
     
    <tr>
      <td>Some Plan</td>
      <td class="p-0">
        <div>Aug 10, 2021 - Sep 20, 2021</div>
        <div>Monthly</div>
      </td>
      <td class="p-0">
        <div></div>
      </td>
    </tr>
  </tbody>
</table>

如何在 table 的 td 中添加额外的相同高度行

How to add additional same height rows in td of table

html

css

datatable

html-table