Question

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

当我在表格中创建表格时，它们之间有一个标题和副标题，但它的边框会不对齐。

此外，故障单状态单元格的边框应与三个单元格（Pending，Cancelled，Total）匹配，但边框未相应对齐。

您可以查看以下支票代码以获得更多说明，也可以立即查看边框的外观。

有谁可以请帮助我如何解决这个问题。

以下是代码：

<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属性决定了表格的边框分开或折叠。在分离的模型中，相邻的细胞每个都有自己独特的边界。在折叠模型中，相邻表格单元格共享边界。

Demo Fiddle

通过扩展，您可以简化标记，以使用包含两个标题行的单个表格，而colspan代替colgroup

＆＃13;

table {
  border-collapse: collapse;
}

＆＃13;

<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>

＆＃13;

如何调整表内的表格有单边框？

1 个答案:

Demo Fiddle