列高亮被行突出显示？ （html表，css格式化）

Question

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

见下文：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

是否有人知道选定行的列轮廓消失的原因？我认为！important标签会保持这个轮廓，但显然不是。还有其他可用于维护该大纲的解决方法吗？

奖金问题是为什么我失去了最右边的边界（更少卡住而不太关心这个问题）。

非常感谢;我很感激！

Answer 1

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

使用盒子阴影来避免移动文本（如边框所示）或突出显示完整单元格（如轮廓所示）。

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

Answer 2

稍等一下后，我觉得我有一个可行的解决方案。

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/

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