Search code examples
htmlcsshtml-tablecolcolgroup

Splitting a table into bordered groups with the colgroup and col elements

Using a combination of CSS and plain HTML, I am trying to get a table that has 3 groups of columns. I only want the groups to have vertical rules:

Desired example

Here is what I have so far:

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>

This gets me vertical rules on ALL the columns:

Actual result

I'm trying to avoid nth-child as the solution should suit IE 8.

Solution

  • The CSS properties are inherited into every column covered by the span attribute. To prevent this:

    • Create three <colgroup> elements. The first colgroup gets the span attribute and no children, accounting for five columns.

    • The second <colgroup> gets four individual <col> elements and the third gets five.

    • Apply the left or right borders for each column as needed with a class.

    The multiple colgroups also make sense semantically; matching the grouping of the data.

    Bonus: You could possibly use this instead of classes:

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

    Complete Example

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