使用colgroup和col元素将表拆分为带边界的组

Question

使用CSS和纯HTML的组合，我试图获得一个包含3组列的表。我只希望这些组有垂直规则：

这是我到目前为止所做的：

colgroup col {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
tr.secondary-headers th {
  border: 0 !important;
  text-align: center;
}

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

<table class="table table-condensed-extra table-hover">
  <colgroup>
    <col span="5">
    <col span="4">
    <col span="5">
  </colgroup>

  <thead>
    <tr class="top-headers">
      <th colspan="5">&nbsp;</th>
      <th colspan="4">Merchant</th>
      <th colspan="5">ClearPath</th>
    </tr>
    <tr class="secondary-headers">
      <th>SKU</th>
      <th>Commodity</th>
      <th>Restricted</th>
      <th>COO</th>
      <th>Quantity</th>
      <th>Sale Price</th>
      <th>Shipping</th>
      <th>Handling</th>
      <th>Insurance</th>
      <th>International Shipping</th>
      <th>International Handling</th>
      <th>Duties</th>
      <th>Taxes</th>
      <th>Brokerage</th>
    </tr>
  </thead>

这为我提供了所有列的垂直规则：

我正在努力避免使用nth-child，因为解决方案应该适合IE 8。

Answer 1

CSS属性将继承到span属性所涵盖的每个列中。为了防止这种情况：

• 创建三个<colgroup>元素。第一个colgroup获取span属性而没有子节点，占五列。

• 第二个<colgroup>获得四个<col>个元素，第三个获得五个元素。

• 根据需要为每个列应用左侧或右侧边框。

多个colgroups在语义上也有意义;匹配数据分组。

---

加分：您可以使用此代替类：

colgroup col:first-child {
  border-left: 1px solid #ccc;
}

---

完整示例

＆＃13;

＆＃13;

colgroup .leftBorder {
  border-left: 1px solid #ccc;
}
colgroup .rightBorder {
  border-right: 1px solid #ccc;
}
table tr.top-headers th {
  text-align: center;
  border: none !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<table id="parcel-details" class="table table-condensed-extra table-hover">
  
  <colgroup span="5">
  </colgroup>

  <colgroup>
    <col class="leftBorder">
    <col>
    <col>
    <col>
  </colgroup>
  
  <colgroup>
    <col class="leftBorder">
    <col>
    <col>
    <col>
    <col class="rightBorder">
  </colgroup>

            <thead>
              <tr class="top-headers">
                <th colspan="5">&nbsp;</th>
                <th colspan="4">Merchant</th>
                <th colspan="5">ClearPath</th>
              </tr>
              <tr class="secondary-headers">
                <th>SKU</th>
                <th>Commodity</th>
                <th>Restricted</th>
                <th>COO</th>
                <th>Quantity</th>
                <th>Sale Price</th>
                <th>Shipping</th>
                <th>Handling</th>
                <th>Insurance</th>
                <th>International Shipping</th>
                <th>International Handling</th>
                <th>Duties</th>
                <th>Taxes</th>
                <th>Brokerage</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </tbody>

</table>

＆＃13;

＆＃13;

＆＃13;