Column outline overriden by row highlight? (html table, css formatting)

Question

I used a derivation of ThinkingStiff's answer to this question cols, colgroups and css :hover psuedoclass to create a table that outlines columns and highlights rows on hover. (Vertical column headers intentionally not outlined).

See below:

table {
  overflow: hidden;
}
caption {
  background-color: #fff;
  padding: 0px
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  width: 100%
}
th, td {
    width: 100px;  
    height: 50px;
    position: relative;
}
tr:hover {
  background-color: #FBFEFD;
}

td:hover::after {
  content: "";
  position: absolute;
  outline: solid black 2px !important;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}

<table class="ComparisonTable">
 <caption>Comparison Table</caption>
  <tbody>
    <tr>
      <th class="CompTabProdCat">Category</th>
      <td>ProdCat1</td>
      <td>ProdCat2</td>
      <td>ProdCat3</td>
      <td>ProdCat4</td>
      <td>ProdCat5</td>
    </tr>
    <tr>
      <th class="CompTabProdName">ProdName</th>
      <td>ProdName1</td>
      <td>ProdName2</td>
      <td>ProdName3</td>
      <td>ProdName4</td>
      <td>ProdName5</td>
    </tr>
    <tr>
      <th class="CompTabProdRat">Rating</th>
      <td>ProdRating1</td>
      <td>ProdRating2</td>
      <td>ProdRating3</td>
      <td>ProdRating4</td>
      <td>ProdRating5</td>
    </tr>
    <tr>
      <th class="CompTabProdPho">Photo</th>
      <td>ProdImage1</td>
      <td>ProdImage2</td>
      <td>ProdImage3</td>
      <td>ProdImage4</td>
      <td>ProdImage5</td>
    </tr>
    <tr>
      <th class="CompTabProdSum">Summary</th>
      <td>ProdSum1</td>
      <td>ProdSum2</td>
      <td>ProdSum3</td>
      <td>ProdSum4</td>
      <td>ProdSum5</td>
    </tr>
  </tbody>
</table>

Does anyone know why the column outline disappears for the selected row? I thought the !important tag would maintain that outline, but apparently not. Any other workarounds available to maintain that outline?

Bonus question is why I'm losing the rightmost border (less stuck and less concerned with that question).

Thanks a ton; I appreciate it!

Short answer is because doing so allowed the outline to work (minus the row highlight). When I remove the position-relative line, outline stops working entirely. Why that's the case.. I don't know. I'm awfully new at this. — admsdro, Jul 03 '17 at 16:39

score 0 · Answer 1 · answered Jul 04 '17 at 23:22

I'm not sure there's a css only solution, but some brief javascript took care of it.

Used box-shadow to avoid shifting text (as border would do) or highlighting full cells (as outline would do).

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('ct-col-highlighted');
},
function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('ct-col-highlighted');
});

.comparison-table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

.comparison-table caption {
  padding: 15px
}

.comparison-table th, td {
  border: 1px solid black;
  width: auto; 
  height: 50px;
}

.comparison-table tr:hover {
  background-color: #FBFEFD;
}

.ct-col-highlighted {
 box-shadow: -2px 0px 0px 0px black, 3px 0px 0px 0px black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='comparison-table'>
 <caption>Caption</caption>
 <tr>
  <th>H-A</th>
  <td>A1 </td>
  <td>A2</td>
  <td>A3</td>
 </tr>
 <tr>
  <th>H-B</th>
  <td>B1</td>
  <td>B2</td>
  <td>B3</td>
 </tr>
 <tr>
  <th>H-C</th>
  <td>C1</td>
  <td>C2</td>
  <td>C3</td>
 </tr>
 <tr>
  <th>H-D</th>
  <td>D1</td>
  <td>D2</td>
  <td>D3</td>
 </tr>
</table>

score 0 · Accepted Answer · answered Jul 08 '17 at 00:17

After monkeying around a bit, I think I have a working solution for you.

table {
  overflow: hidden;
  overflow-x: visible;
  display: block;
}

tbody {
  overflow-y: hidden;
  display: block;
  margin-top: 19px;
  position: relative;
}

caption {
  background-color: #fff;
  padding: 0px;
  width: 617px;
  z-index: 20;
  position: absolute;
  border: 1px solid black;
  border-bottom: 0;
}

table,
th,
td {
  border-collapse: collapse;
  text-align: center;
  width: 100%
}

th,
td {
  width: 100px;
  height: 50px;
  position: relative;
  border: 1px solid black;
}

tr:hover {
  background-color: #FBFEFD;
}

td:hover::after {
  content: "";
  position: absolute;
  outline: solid black 2px !important;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  /*z-index: -1;*/
}

JSFiddle example: https://jsfiddle.net/jennifergoncalves/rntyt13u/2/

I can help you tweak it from here if more work is needed.

Exactly what I was looking for.. thanks! I'll probably change some of the caption stuff stylistically, but that's just based on preference, and this solves the problem. — admsdro, Jul 08 '17 at 17:13

Column outline overriden by row highlight? (html table, css formatting)

2 Answers2