表头不会边框折叠答案

【问题标题】：Table header won't border-collapse表头不会边框折叠
【发布时间】：2016-02-06 11:56:55
【问题描述】：

我正在尝试创建一个表格并在 HOVER 上折叠标题元素的边框，而表格的其余部分保持不变。如果我在整个桌子上尝试它会起作用，但当我只在th 上尝试时它不会。我究竟做错了什么？这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style>

table
{
    border:3px solid black;


}

tr{
 background: #FFFF66;
 }

td{
    border:1px solid red;
}

th{
    border:2px solid blue;
    transition:transform 2s;

}

table:hover th{
    border-collapse: collapse;
    transform: rotate(360deg);
}

</style>
</head>
<body>

<h2>Most Watched Shows:</h2>
<table  width="70%">
  <tr>
    <th>Top 5</th>
    <th>6-10</th>
  </tr>
  <tr>
<td>1.<a style=color:blue href="http://www.imdb.com/title/tt1520211/?ref_=nv_sr_1">The Walking Dead</a></td>
<td>6.<a style=color:blue href="http://www.imdb.com/title/tt2661044/?ref_=nv_sr_1">The 100</a></td>
  </tr>
  <tr>
<td>2.<a style=color:blue href="http://www.imdb.com/title/tt0460681/?ref_=nv_sr_1">Supernatural</a></td>
<td>7.<a style=color:blue href="http://www.imdb.com/title/tt2193021/?ref_=nv_sr_1">Arrow</a></td>
  </tr>
  <tr>
<td>3.<a style=color:blue href="http://www.imdb.com/title/tt0773262/?ref_=nv_sr_1">Dexter</a></td>
<td>8.<a style=color:blue href="http://www.imdb.com/title/tt1632701/?ref_=nv_sr_1">Suits</a></td>
  </tr>
    <tr>
<td>4.<a style=color:blue href="http://www.imdb.com/title/tt0944947/?ref_=nv_sr_1">Game of Thrones</a></td>
<td>9.<a style=color:blue href="http://www.imdb.com/title/tt2017109/?ref_=nv_sr_1">Banshee</a></td>
  </tr>
    <tr>
<td>5.<a style=color:blue href="http://www.imdb.com/title/tt0412142/?ref_=nv_sr_2">House MD</a></td>
<td>10.<a style=color:blue href="http://www.imdb.com/title/tt0903747/?ref_=nv_sr_3">Breaking Bad</a></td>
  </tr>
</table>
</body>
</html>

【问题讨论】：

It works.
您的浏览器版本是多少？
我使用谷歌浏览器。我想我得到了最新版本 46.0.2490.80 m
你检查了上面的链接吗？
我知道旋转有效....问题在于边框折叠。还是分开的

标签： css hover border html-table collapse

【解决方案1】：

您可以使用CSS ::after Selector 进行模拟。希望这个Jsfiddle可以帮到你。

table
{   
    border-collapse: collapse;
}

tr{
 background: #FFFF66;
 }

td{
    border:1px solid red;    
}

th{
    position: relative;

}

th:after
{
    content:'';
    display: block;
    border:2px solid blue;
    transition: transform 2s;
    position: absolute;
    right: -2px;
    left: -2px;
    top: -2px;
    bottom: -2px;
    -webkit-transition: transform 2s;
    -moz-transition: transform 2s;
    -ms-transition: transform 2s;
    -o-transition: transform 2s;
    transition: transform 2s;
    
}

table th:hover:after,
table th:hover{  
    -webkit-transform: rotate(360deg) ;
    -moz-transform: rotate(360deg) ;
    -o-transform: rotate(360deg) ;
    -ms-transform: rotate(360deg) ;
    transform: rotate(360deg) ;
}

<h2>Most Watched Shows:</h2>
<table  width="70%">
  <tr>
    <th>Top 5</th>
    <th>6-10</th>
  </tr>
  <tr>
<td>1.<a style=color:blue href="http://www.imdb.com/title/tt1520211/?ref_=nv_sr_1">The Walking Dead</a></td>
<td>6.<a style=color:blue href="http://www.imdb.com/title/tt2661044/?ref_=nv_sr_1">The 100</a></td>
  </tr>
  <tr>
<td>2.<a style=color:blue href="http://www.imdb.com/title/tt0460681/?ref_=nv_sr_1">Supernatural</a></td>
<td>7.<a style=color:blue href="http://www.imdb.com/title/tt2193021/?ref_=nv_sr_1">Arrow</a></td>
  </tr>
  <tr>
<td>3.<a style=color:blue href="http://www.imdb.com/title/tt0773262/?ref_=nv_sr_1">Dexter</a></td>
<td>8.<a style=color:blue href="http://www.imdb.com/title/tt1632701/?ref_=nv_sr_1">Suits</a></td>
  </tr>
    <tr>
<td>4.<a style=color:blue href="http://www.imdb.com/title/tt0944947/?ref_=nv_sr_1">Game of Thrones</a></td>
<td>9.<a style=color:blue href="http://www.imdb.com/title/tt2017109/?ref_=nv_sr_1">Banshee</a></td>
  </tr>
    <tr>
<td>5.<a style=color:blue href="http://www.imdb.com/title/tt0412142/?ref_=nv_sr_2">House MD</a></td>
<td>10.<a style=color:blue href="http://www.imdb.com/title/tt0903747/?ref_=nv_sr_3">Breaking Bad</a></td>
  </tr>
</table>

【讨论】：

@CristiLungu 欢迎您。 This example rotate the text as well.