Table header 不会 border-collapse

Question

我正在尝试创建一个 table 并在悬停时折叠 header 元素的边框，而 table 的其余部分保持不变。如果我尝试整个 table，它会起作用，但当我只尝试 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>

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

Table header 不会 border-collapse

Table header won't border-collapse

css

html-table

border

hover

collapse