Is there a better way to highlight a group of elements, either horizontally or vertically?

Question

I am trying to highlight a group of table cells (vertically and horizontally) and I am not sure what the best way is. Ideally I'd also like to add a drop shadow on the outlined group.

This is what I came up with, but it's quite hacky. https://jsfiddle.net/jhxLb6s5/39/

Is there a better way to accomplish this?

table,
td {
  border: 1px solid #000;
  padding: 4px;
}

td {
  position: relative;
}

td.outline {
  font-size: 2.5rem;
}

td.outline:after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  border-color: red;
  border-style: solid;  
}

td.outline.left:after {
  border-width: 6px 0 6px 6px;
}

td.outline.middle-horizontal:after {
  border-width: 6px 0 6px 0;
}

td.outline.right:after {
  border-width: 6px 6px 6px 0;
}

Answer 1

Outline a group of table cells

We can use the rules of table border conflicts to our advantage and place borders in the right places with a bit of tricky CSS selector use where we can to reduce the need for extra classes.

To go down the column, across rows, we need to specify the top and bottom cells.

TLDR: Full example at the end.

The table

Highlight in a row

Each cell in the outlined group gets an .outline class:

<table>
  <tr>
    <td>adipiscing</td>
    <td class="outline">elit</td>
    <td class="outline">Quisque</td>
    <td class="outline">nulla</td>
    <td class="outline">massa</td>
    <td>vestibulum</td>
  </tr>
</table>

Highlight down a column

Each cell in an outlined column group gets and .outline-y class. The top cell to be highlight is additionally given .top and the bottom celll .bottom:

<table>
  <tr>
    <td>adipiscing</td>
    <td class="outline-y top">elit</td>
  </tr>
  <tr>
    <td>adipiscing</td>
    <td class="outline-y">elit</td>
  </tr>
  <tr>
    <td>adipiscing</td>
    <td class="outline-y bottom">elit</td>
  </tr>
</table>

The CSS

Each outlined cell receives a top bottom and left border:

td.outline {
  border-top: solid 5px red;
  border-bottom: solid 5px red;
  border-left: solid 5px red;
}

Any outlined cell that is to the right of another outlined cell has its left border removed:

(Read more: adjacent sibling combinator +)

td.outline + td.outline {
  border-left: none
}

The first cell after the last outlined cell has a left border given to it:

(Read more: :not() pseudo-class)

td.outline + td:not(.outline) {
  border-left: solid 5px red;
}

If an outlined cell is the last in the row, it gets a right border:

td.outline:last-child {
  border-right: solid 5px red;
}

Highlighting down a column across rows

A second class .outline-y gives left and right borders:

td.outline-y {
  border-left: solid 5px red;
  border-right: solid 5px red;
}

Then, the top and bottom have to be identified with classes to give top and bottom borders as needed:

td.outline-y.top {
  border-top: solid 5px red;  
}

td.outline-y.bottom {
  border-bottom: solid 5px red;
}

Complete Example

table {
  border-collapse: collapse
}

td {
  border: 1px solid #000;
  padding: 4px;
}

td.outline {
  border-top: solid 5px red;
  border-bottom: solid 5px red;
  border-left: solid 5px red;
}

td.outline+td.outline {
  border-left: none
}

td.outline+td:not(.outline) {
  border-left: solid 5px red;
}

td.outline:last-child {
  border-right: solid 5px red;
}

td.outline-y.top {
  border-top: solid 5px red;  
}

td.outline-y.bottom {
  border-bottom: solid 5px red;
}


td.outline-y {
  border-left: solid 5px red;
  border-right: solid 5px red;
}

<h1>Any combination</h1>
<h2>Example 1</h2>

<table>
  <tr>
    <td>lorem</td>
    <td>ipsum</td>
    <td>dolor</td>
    <td>sit</td>
    <td>amet</td>
    <td>consectetur</td>
  </tr>
  <tr>
    <td>adipiscing</td>
    <td class="outline">elit</td>
    <td class="outline">Quisque</td>
    <td class="outline">nulla</td>
    <td class="outline">massa</td>
    <td>vestibulum</td>
  </tr>
  <tr>
    <td>adipiscing</td>
    <td>elit</td>
    <td>Quisque</td>
    <td>nulla</td>
    <td>massa</td>
    <td>vestibulum</td>
  </tr>
</table>
<h2>Example 2</h2>
<table>
  <tr>
    <td>lorem</td>
    <td>ipsum</td>
    <td class="outline">dolor</td>
    <td>sit</td>
    <td>amet</td>
    <td>consectetur</td>
  </tr>
  <tr>
    <td>adipiscing</td>
    <td>elit</td>
    <td>Quisque</td>
    <td>nulla</td>
    <td>massa</td>
    <td>vestibulum</td>
  </tr>
  <tr>
    <td class="outline">adipiscing</td>
    <td>elit</td>
    <td>Quisque</td>
    <td>nulla</td>
    <td>massa</td>
    <td class="outline">vestibulum</td>
  </tr>
</table>
<h2>Example 3</h2>
<table>
  <tr>
    <td>lorem</td>
    <td>ipsum</td>
    <td class="outline">dolor</td>
    <td>sit</td>
    <td>amet</td>
    <td>consectetur</td>
  </tr>
  <tr>
    <td class="outline">adipiscing</td>
    <td class="outline">elit</td>
    <td class="outline">Quisque</td>
    <td class="outline">nulla</td>
    <td class="outline">massa</td>
    <td class="outline">vestibulum</td>
  </tr>
  <tr>
    <td class="outline">adipiscing</td>
    <td class="outline">elit</td>
    <td>Quisque</td>
    <td class="outline">nulla</td>
    <td>massa</td>
    <td class="outline">vestibulum</td>
  </tr>
</table>

<h2>Example 3 - In a column across rows</h2>

<table>
  <tr>
    <td>lorem</td>
    <td class="outline-y top">ipsum</td>
    <td>dolor</td>
    <td>sit</td>
    <td>amet</td>
    <td>consectetur</td>
  </tr>
  <tr>
    <td>adipiscing</td>
    <td class="outline-y">elit</td>
    <td class="outline">Quisque</td>
    <td class="outline">nulla</td>
    <td class="outline">massa</td>
    <td class="outline">vestibulum</td>
  </tr>
  <tr>
    <td>adipiscing</td>
    <td class="outline-y bottom">elit</td>
    <td>Quisque</td>
    <td>nulla</td>
    <td>massa</td>
    <td>vestibulum</td>
  </tr>
</table>