如何调整表内表为单边框？

Question

我正在尝试用 HTML 创建一个表格（对于它来说是新的）。

中间有一个标题和副标题，但当我在表中创建表时，其边框未对齐。

此外，工单状态单元格的边框应与三个单元格（待处理、已取消、总计）匹配，但边框未相应对齐。

您可以检查以下检查代码以获得更多说明，还可以立即查看边框的外观和感觉。

任何人都可以帮助我如何解决这个问题。

以下是代码：

<div>
<table border="1" style="width: 100%;">
    <colgroup>
        <col width="30%">
            <col width="30%">
                <col width="20%">
                    <col width="20%">
    </colgroup>
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Ticket Status</th>
            <th scope="col">Quota People</th>
            <th scope="col">Quota People</th>
        </tr>
    </thead>
    <tbody>
        <tr></tr>
    </tbody>
</table>
<table border="1" style="width: 100%;">
    <colgroup>
        <col width="25%">
            <col width="5%">
                <col width="10%">
                    <col width="10%">
                        <col width="10%">
                            <col width="10%">
                                <col width="10%">
                                    <col width="10%">
                                        <col width="10%">
    </colgroup>
    <thead>
        <tr>
            <th scope="col">Unit Name</th>
            <th scope="col">ID</th>
            <th scope="col">Pending</th>
            <th scope="col">Cancelled</th>
            <th scope="col">Total</th>
            <th scope="col">Sports</th>
            <th scope="col">VIP</th>
            <th scope="col">Sports</th>
            <th scope="col">VIP</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Finland Railways</td>
            <td>210</td>
            <td>39</td>
            <td>21</td>
            <td>14</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

小提琴： https: //jsfiddle.net/hjkofLmp/

Answer 1

只需添加border-collapse：

table {
  border-collapse: collapse;
}

border-collapse CSS 属性确定表格的边框是分离还是折叠。在分离模型中，相邻的单元格都有自己独特的边界。在折叠模型中，相邻的表格单元格共享边框。

演示小提琴

通过扩展，您可以简化标记以使用具有两个标题行的单个表，而colspan不是colgroup

table {
  border-collapse: collapse;
}

<table border="1" style="width: 100%;">
  <thead>
    <tr>
      <th scope="col" colspan="2">Ticket Status</th>
      <th scope="col" colspan="3">Quota People</th>
      <th scope="col" colspan="4">Quota People</th>
    </tr>
    <tr>
      <th scope="col">Unit Name</th>
      <th scope="col">ID</th>
      <th scope="col">Pending</th>
      <th scope="col">Cancelled</th>
      <th scope="col">Total</th>
      <th scope="col">Sports</th>
      <th scope="col">VIP</th>
      <th scope="col">Sports</th>
      <th scope="col">VIP</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Finland Railways</td>
      <td>210</td>
      <td>39</td>
      <td>21</td>
      <td>14</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
</table>