如何在已拆分的表格内部进一步拆分表格列

我已经接近3年未接触编码，目前想要实现如下设计，不清楚该如何进行表格拆分，我尝试编写的代码如下：

<!-- grey color row code :   -->

<div class="row ">
  <div class="col-md-12 center-block text-center" style="background-color: #cccccc; color: black; border: solid; border-color: black; font-weight: bold">
    Row in grey color
  </div>
</div>
<!-- first table splitted as part A and part B: -->

<div class="row ">
  <div style="width: 50%; text-align: center; height: 30px; display: inline-block; border: solid; border-color: black; background: #80ffe5">
    PArt A
    <table>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_A1" checked>
        </td>
        <td>A1
        </td>
      </tr>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_a2" checked>
        </td>
        <td>A2
        </td>
      </tr>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_a3" checked>
        </td>
        <td>A3
        </td>
      </tr>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_a4" checked>
        </td>
        <td>A4
        </td>
      </tr>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_25" checked>
        </td>
        <td>A5
        </td>
      </tr>
    </table>
    <div style="width: 50%; text-align: center; height: 30px; display: inline-block; border: solid; border-color: black; background: #80ffe5">
      <!--               Half PArt turqoise color header on left side only -->
      <table>
        <tr style="height: 30px">
          <td class="table">
            <input type="checkbox" name="chkbox_A1.1" checked>
          </td>
          <td>A1.1
          </td>
        </tr>
        <tr style="height: 30px">
          <td class="table">
            <input type="checkbox" name="chkbox_a1.2" checked>
          </td>
          <td>A1.2
          </td>
        </tr>
        <tr style="height: 30px">
          <td class="table">
            <input type="checkbox" name="chkbox_a1.3" checked>
          </td>
          <td>A1.3
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div style="width: 50%; height: 30px; text-align: center; display: inline-block; border: solid; border-color: black; background: #80ffe5;">
    Part B
    <table>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_b1" checked>
        </td>
        <td>B1
        </td>
      </tr>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_b2" checked>
        </td>
        <td>B2
        </td>
      </tr>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_b3" checked>
        </td>
        <td>B3
        </td>
      </tr>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_b4" checked>
        </td>
        <td>B4
        </td>
      </tr>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_b5" checked>
        </td>
        <td>B5
        </td>
      </tr>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_b6" checked>
        </td>
        <td>B6
        </td>
      </tr>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_b7" checked>
        </td>
        <td>B7
        </td>
      </tr>
      <tr style="height: 30px">
        <td class="table">
          <input type="checkbox" name="chkbox_b8" checked>
        </td>
        <td>B8
        </td>
      </tr>
    </table>
  </div>
</div>

<div class="row">
  <div style="width: 100%; text-align: center; height: 30px; display: inline-block; border: solid; border-color: black; background: #80ffe5">
    Escalation
  </div>
  <table>
    <tr style="height: 30px; widhth">
      <td class="table">
        <input type="checkbox" name="chkbox_A1.1" checked>
      </td>
      <td>A1.1
      </td>
      <td class="table">
        <input type="checkbox" name="chkbox_B1.1" checked>
      </td>
      <td>B1.1
      </td>
    </tr>
    <tr style="height: 30px">
      <td class="table">
        <input type="checkbox" name="chkbox_a2.1" checked>
      </td>
      <td>A2.1
      </td>
      <td class="table">
        <input type="checkbox" name="chkbox_B1.2" checked>
      </td>
      <td>B1.2
      </td>
    </tr>
    <!-- @*3 more same <tr> here deleted due to code length*@   -->

  </table>
</div>

你现有代码的核心问题如下：

• 给Part A、Part B的外层容器设置了固定height:30px，导致内部表格内容溢出、布局错位
• Part A下的二级半区容器错误嵌套在了Part A的主容器内部，结构层级混乱
• 用inline-block实现50%宽度布局时，没有处理边框、元素间隙带来的宽度溢出问题，容易出现换行错位
• 表格没有设置宽度占满父容器，边框和对齐效果达不到预期

已经调整了结构和样式，完全符合你要的表格拆分效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格拆分实现</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    .row {
      width: 100%;
    }
    .header-grey {
      width: 100%;
      text-align: center;
      background-color: #cccccc;
      color: black;
      border: 1px solid black;
      font-weight: bold;
      padding: 8px 0;
    }
    .table-container {
      display: flex;
      width: 100%;
    }
    .half-col {
      width: 50%;
      border: 1px solid black;
      background: #80ffe5;
    }
    .col-title {
      text-align: center;
      padding: 8px 0;
      font-weight: bold;
      border-bottom: 1px solid black;
    }
    .sub-table-wrap {
      display: flex;
    }
    .sub-half-col {
      width: 50%;
      border-right: 1px solid black;
    }
    .sub-half-col:last-child {
      border-right: none;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    table tr {
      height: 30px;
    }
    table td {
      border: 1px solid #eee;
      padding-left: 12px;
    }
    .full-width-title {
      width: 100%;
      text-align: center;
      background: #80ffe5;
      border: 1px solid black;
      padding: 8px 0;
      font-weight: bold;
    }
    .escalation-table td {
      width: 25%;
    }
  </style>
</head>
<body>
<!-- 灰色顶部行 -->
<div class="row">
  <div class="header-grey">
    Row in grey color
  </div>
</div>

<!-- Part A和Part B分区 -->
<div class="row table-container">
  <!-- 左侧Part A区域 -->
  <div class="half-col">
    <div class="col-title">Part A</div>
    <div class="sub-table-wrap">
      <!-- Part A左半区 -->
      <div class="sub-half-col">
        <table>
          <tr>
            <td><input type="checkbox" name="chkbox_A1" checked></td>
            <td>A1</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox_a2" checked></td>
            <td>A2</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox_a3" checked></td>
            <td>A3</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox_a4" checked></td>
            <td>A4</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox_25" checked></td>
            <td>A5</td>
          </tr>
        </table>
      </div>
      <!-- Part A右半区 -->
      <div class="sub-half-col">
        <table>
          <tr>
            <td><input type="checkbox" name="chkbox_A1.1" checked></td>
            <td>A1.1</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox_a1.2" checked></td>
            <td>A1.2</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="chkbox_a1.3" checked></td>
            <td>A1.3</td>
          </tr>
        </table>
      </div>
    </div>
  </div>

  <!-- 右侧Part B区域 -->
  <div class="half-col">
    <div class="col-title">Part B</div>
    <table>
      <tr>
        <td><input type="checkbox" name="chkbox_b1" checked></td>
        <td>B1</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="chkbox_b2" checked></td>
        <td>B2</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="chkbox_b3" checked></td>
        <td>B3</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="chkbox_b4" checked></td>
        <td>B4</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="chkbox_b5" checked></td>
        <td>B5</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="chkbox_b6" checked></td>
        <td>B6</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="chkbox_b7" checked></td>
        <td>B7</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="chkbox_b8" checked></td>
        <td>B8</td>
      </tr>
    </table>
  </div>
</div>

<!-- Escalation区域 -->
<div class="row">
  <div class="full-width-title">Escalation</div>
  <table class="escalation-table">
    <tr>
      <td><input type="checkbox" name="chkbox_A1.1" checked></td>
      <td>A1.1</td>
      <td><input type="checkbox" name="chkbox_B1.1" checked></td>
      <td>B1.1</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="chkbox_a2.1" checked></td>
      <td>A2.1</td>
      <td><input type="checkbox" name="chkbox_B1.2" checked></td>
      <td>B1.2</td>
    </tr>
    <!-- 剩余行按照上面的结构补充即可 -->
  </table>
</div>
</body>
</html>

• 用flex布局替代inline-block实现等分列，避免宽度溢出、换行的问题
• 把内联样式统一抽到style标签里，后续修改更方便
• 加了box-sizing: border-box规则，边框不会撑大容器宽度
• 表格默认占满父容器，对齐更规整

内容的提问来源于stack exchange，提问作者Riya