如何在已拆分的 Bootstrap 表中拆分单元格

Posted 2023-03-05

【中文标题】如何在已拆分的 Bootstrap 表中拆分单元格

【英文标题】：How to split cells within Bootstrap table which have been already splited

【发布时间】：2020-10-03 03:12:42

【问题描述】：

我有一个包含多行的引导表。我想将单元格拆分为不同的部分，我可以拆分行拆分 1，但我很困惑如何将拆分 1 拆分为拆分 2。我正在尝试使用rowspan 实现Split-2，但由于某种原因它变得一团糟。有人可以帮帮我吗。

 <table class="table table-bordered">
    <tbody>
        <tr>
            <td rowspan="2" style="background-color: #a854a8;text-align: center;"> MAIN FIELD </td>
            <td > TIME-1 </td>
            <td>
                <input type="datetime-local" class="form-control" ng-model="formdata.time" id="time" placeholder="Time 2">
            </td>
        </tr>
        <tr>
            <td style="background-color: #eedded;width: 10%;"> TIME-2 </td>
            <td>
                <input type="datetime-local" class="form-control" ng-model="formdata.time2" id="time2" placeholder="Time2">
            </td>
        </tr>
    </tbody>
</table>

【参考方案1】：

你很亲密...下面的 sn-p 应该会有所帮助：

th 
  background-color: lightpink;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<table class="table table-bordered">
  <tr>
    <th>column 1</th>
    <th>column 2</th>
    <th>column 3</th>
  </tr>
  <tr>
    <td rowspan="4" style="background-color: #a854a8;text-align: center;">Main field</td>
    <td rowspan="2" style="background-color: #eedded;width: 10%;">Time1 split 1</td>
    <td>split-2 result</td>
  </tr>
  <tr>
    <td>split-2 result</td>
  </tr>
  <tr>
    <td rowspan="2" style="background-color: #eedded;width: 10%;">Time2 split 1</td>
    <td>split-2 result</td>
  </tr>
  <tr>
    <td>split-2 result</td>
  </tr>
</table>