如何在表格的 td 中添加其他相同高度的行答案

【问题标题】：How to add additional same height rows in td of table如何在表格的 td 中添加其他相同高度的行
【发布时间】：2021-07-29 04:37:56
【问题描述】：

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

如何制作这样的结构，以便这些数据相互对齐。我可以使用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>$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>

【问题讨论】：

不要使用<hr>来分隔它们，而是使用不同的单元格并使用rowspan合并第一个单元格。
<hr> 仅用于演示，我在<div> 上使用边框底部

标签： html css html-table datatable

【解决方案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>$30</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>$45</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>$30</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>$45</div>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

没有固定数字来使用 rowspan，John 可能有一个、两个或多个计划
@IhtishamKhan 那么您必须根据从数据库中检索到的数据来计算该值。根据您提供的信息，任何人都无法帮助您。