行突出显示覆盖的列轮廓？（html表格，css格式）答案

【问题标题】：Column outline overriden by row highlight? (html table, css formatting)行突出显示覆盖的列轮廓？（html表格，css格式）
【发布时间】：2017-07-03 15:41:18
【问题描述】：

我使用了 ThinkingStiff 对此问题的回答 cols, colgroups and css :hover psuedoclass 的推导来创建一个表格，该表格概述了列并在悬停时突出显示行。（垂直列标题故意未列出）。

见下文：

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>

有谁知道为什么所选行的列轮廓消失了？我认为 !important 标签会保持该轮廓，但显然不是。是否有其他可用的解决方法来维护该大纲？

额外的问题是为什么我失去了最右边的边框（较少卡住，不太关心这个问题）。

非常感谢；我很感激！

【问题讨论】：

为什么在表格单元格上使用相对位置？
简短的回答是因为这样做可以让大纲工作（减去行突出显示）。当我删除位置相对线时，轮廓完全停止工作。为什么会这样。。我不知道。我对此非常陌生。

标签： css html-table

【解决方案1】：

在胡思乱想之后，我想我有一个可行的解决方案。

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 示例：https://jsfiddle.net/jennifergoncalves/rntyt13u/2/

如果需要更多工作，我可以帮助您从这里进行调整。

【讨论】：

正是我想要的......谢谢！我可能会在风格上更改一些字幕内容，但这只是基于偏好，这解决了问题。

【解决方案2】：

我不确定是否有纯 css 解决方案，但一些简短的 javascript 处理了它。

使用 box-shadow 来避免移动文本（如边框那样）或突出显示整个单元格（如轮廓那样）。

$('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>

【讨论】：