html - Chrome、colspan 和边框

Question

我有一个相当简单的 HTML 表格，其中一行有一个 td 和 colspan 属性。应用于相应tr 的border-bottom 不会影响整个colspan，只会影响未跨接的列。这只发生在 chrome 中。

突出显示此问题的示例代码。在 chrome 中观察 Recent Items 行没有横跨整行的边框。

.x1hu {
  height: 28px;
  border-bottom: 1px solid black;
}
.x1hw {
  text-align: left;
  font-weight: bold;
  height: 28px;
  color: #000000;
  border-bottom: 1px solid #D6DFE6;
}
.x1hs {
  border-collapse: collapse;
  table-layout: fixed;
}
.x1hx {
  font-weight: bold;
  border-bottom: 1px solid red;
}

<table role="grid" class="x1hs" aria-rowcount="5">
    <tr class="x1hw">
        <th>Name</th>
        <th>Title</th>
        <th>Contact Email</th>
        <th><span style="font-style:italic">Specializations</span></th>
    </tr>
    <tr class="x1hx">
      <td colpsan="4">Recent Items</td>
    </tr>
    <tr class="x1hu" id="dmoTpl:iSearch2::item0" aria-rowindex="1" data-afr-value="469">
        <td>Lester Shull</td>
        <td>Analyst</td>
        <td>Lester.Shull@acme.com</td>
        <td><span style="font-style:italic">filing, fresher, physio, </span></td>
    </tr>
    <tr class="x1hu" id="dmoTpl:iSearch2::item1" aria-rowindex="2" data-afr-value="299">
        <td>Jennefer Patrick</td>
        <td>Contractor</td>
        <td>Jennefer.Patrick@acme.com</td>
        <td><span style="font-style:italic"></span></td>
    </tr>
    <tr class="x1hu" id="dmoTpl:iSearch2::item2" aria-rowindex="3" data-afr-value="2072">
        <td>Alexis Prentice</td>
        <td>Contractor</td>
        <td>Alexis.Prentice@acme.com</td>
        <td><span style="font-style:italic">support, veteran, ERT, </span></td>
    </tr>
    <tr class="x1hu" id="dmoTpl:iSearch2::item3" aria-rowindex="4" data-afr-value="4641">
        <td>Hyun Mathias</td>
        <td>Supervisor</td>
        <td>Hyun.Mathias@acme.com</td>
        <td><span style="font-style:italic"></span></td>
    </tr>
    <tr class="x1hu" id="dmoTpl:iSearch2::item4" aria-rowindex="5" data-afr-value="3900">
        <td>Douglas Hildreth</td>
        <td>Manager</td>
        <td>Douglas.Hildreth@acme.com</td>
        <td><span style="font-style:italic">mentor, </span></td>
    </tr>
</table>

Answer 1

你打错了:这里<td colspan="4">你写了colpsan

.x1hu {
  height: 28px;
  border-bottom: 1px solid black;
}
.x1hw {
  text-align: left;
  font-weight: bold;
  height: 28px;
  color: #000000;
  border-bottom: 1px solid #D6DFE6;
}
.x1hs {
  border-collapse: collapse;
  table-layout: fixed;
}
.x1hx {
  font-weight: bold;
  border-bottom: 1px solid red;
}

<table role="grid" class="x1hs" aria-rowcount="5">
    <tr class="x1hw">
        <th>Name</th>
        <th>Title</th>
        <th>Contact Email</th>
        <th><span style="font-style:italic">Specializations</span></th>
    </tr>
    <tr class="x1hx">
      <td colspan="4">Recent Items</td>
    </tr>
    <tr class="x1hu" id="dmoTpl:iSearch2::item0" aria-rowindex="1" data-afr-value="469">
        <td>Lester Shull</td>
        <td>Analyst</td>
        <td>Lester.Shull@acme.com</td>
        <td><span style="font-style:italic">filing, fresher, physio, </span></td>
    </tr>
    <tr class="x1hu" id="dmoTpl:iSearch2::item1" aria-rowindex="2" data-afr-value="299">
        <td>Jennefer Patrick</td>
        <td>Contractor</td>
        <td>Jennefer.Patrick@acme.com</td>
        <td><span style="font-style:italic"></span></td>
    </tr>
    <tr class="x1hu" id="dmoTpl:iSearch2::item2" aria-rowindex="3" data-afr-value="2072">
        <td>Alexis Prentice</td>
        <td>Contractor</td>
        <td>Alexis.Prentice@acme.com</td>
        <td><span style="font-style:italic">support, veteran, ERT, </span></td>
    </tr>
    <tr class="x1hu" id="dmoTpl:iSearch2::item3" aria-rowindex="4" data-afr-value="4641">
        <td>Hyun Mathias</td>
        <td>Supervisor</td>
        <td>Hyun.Mathias@acme.com</td>
        <td><span style="font-style:italic"></span></td>
    </tr>
    <tr class="x1hu" id="dmoTpl:iSearch2::item4" aria-rowindex="5" data-afr-value="3900">
        <td>Douglas Hildreth</td>
        <td>Manager</td>
        <td>Douglas.Hildreth@acme.com</td>
        <td><span style="font-style:italic">mentor, </span></td>
    </tr>
</table>