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

Question

我使用了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"> 
 
\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>

有誰知道爲什麼選定行的列輪廓消失？我認爲！重要的標籤會保持這個輪廓，但顯然不是。任何其他解決方法可用於維護該大綱？

獎金的問題是爲什麼我失去了最右邊的邊界（少卡住，不太關心這個問題）。

感謝一噸;我很感激！

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

我可以幫你從這裏調整，如果需要更多的工作。

Answer 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 { 
 
\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>