按行高亮重叠列轮廓？（html表格，css格式）

我使用了ThinkingStiff对这个问题cols, colgroups and css :hover psuedoclass的答案的一个派生来创建一个表格，该表格列出了悬停时的列和突出显示的行。（有意不列出垂直列标题）。按行高亮重叠列轮廓？（html表格，css格式）

见下文：

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"> 
 
\t <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>

有谁知道为什么选定行的列轮廓消失？我认为！重要的标签会保持这个轮廓，但显然不是。任何其他解决方法可用于维护该大纲？

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

感谢一吨;我很感激！

来源

2017-07-03 admsdro

为什么你在你的表格单元上使用相对位置？ –

简短的回答是因为这样做可以使轮廓起作用（减去行高亮）。当我删除位置相对线时，轮廓完全停止工作。为什么是这种情况..我不知道。我对此很感兴趣。 – admsdro

周围有点胡闹之后，我想我要给你一个可行的解决方案。

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/

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

来源

2017-07-08 00:17:45

正是我在找的东西..谢谢！我可能会在风格上改变一些标题的东西，但这只是基于偏好，这可以解决问题。 – admsdro

我不确定只有一个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 { 
 
\t 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'> 
 
\t <caption>Caption</caption> 
 
\t <tr> 
 
\t \t <th>H-A</th> 
 
\t \t <td>A1 </td> 
 
\t \t <td>A2</td> 
 
\t \t <td>A3</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <th>H-B</th> 
 
\t \t <td>B1</td> 
 
\t \t <td>B2</td> 
 
\t \t <td>B3</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <th>H-C</th> 
 
\t \t <td>C1</td> 
 
\t \t <td>C2</td> 
 
\t \t <td>C3</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <th>H-D</th> 
 
\t \t <td>D1</td> 
 
\t \t <td>D2</td> 
 
\t \t <td>D3</td> 
 
\t </tr> 
 
</table>

来源

2017-07-04 23:22:54 admsdro

按行高亮重叠列轮廓？ （html表格，css格式）

回答

相关问题

按行高亮重叠列轮廓？（html表格，css格式）