Table 正文 CSS 过渡

Question

当我将鼠标悬停在它上面时，我正在尝试为 table 主体进行转换，这样它就消失了，table 中唯一剩下的就是 table 头部。我是过渡新手，所以也许我做错了。我所期望的是 table body 慢慢上升直到 0px，但它没有。我也只需要使用 CSS。你能帮助我吗？谢谢

<!DOCTYPE html>
<html>

<head>
  <style>
    thead {
      color: red;
    }
    table,
    th {
      border: 3px solid black;
    }
    tr {
      background: #FFFF66;
    }
    tbody {
      color: blue;
      transition: max-height 2s;
    }
    tbody:hover {
      transition: max-height 2s ease;
      max-height: 0px;
    }
  </style>
</head>

<body>


  <h2>Most Watched Shows:</h2>
  <table width="70%">
    <thead>
      <tr>
        <th>Top 5</th>
        <th>6-10</th>
      </tr>
    </thead>

    <tbody>
      <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>
    </tbody>
  </table>
</body>

</html>

Answer 1

我尝试了一些不同的东西，我为 table 数据 td 应用了 div，它起作用了：D

<!DOCTYPE html>
<html>

<head>
  <style>
    thead {
      color: red;
    }
    table,
    th {
      border: 3px solid black;
      border-collapse: collapse;
    }
    tr {
      background: #FFFF66;
    }
    td {
      border: 1px solid red;
    }
    div {
      transition: max-height 1.5s ease;
      overflow: hidden;
      max-height: 50px;
    }
    table:hover div {
      transition: max-height 2s ease;
      max-height: 0px;
    }
  </style>
</head>

<body>


  <h2>Most Watched Shows:</h2>
  <table width="70%">
    <thead>
      <tr>
        <th>Top 5</th>
        <th>6-10</th>
      </tr>
    </thead>

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

</html>

Table 正文 CSS 过渡

Table body CSS transition

css

html-table

css-transitions