title: Prevent td Element From Growing to Fit Child Elements
body: <p>I am trying to make a table with drop-down info tabs that appear when you scroll over a term.
  My initial approach was to make these info tabs not display with <code>display : none</code> css rule, then
  when the user hovers the mouse over the corresponding text, the the info tab appears by altering display property to <code>display: block</code>.</p>
  <p>My problem is that I can't figure out how to override the default behavior for the containing/parent element, and the table resizes to fit the newly appeared element, then resizes back to normal when the user scrolls away. I experimented with z-index (setting the td to z-index: 1 and info tab to z-index:2) as well as <code>visibility:hidden -&gt; visibility:visible</code> vs <code>display:none -&gt; display:block</code>, but no luck with either of those. I also tried setting the max height of the td element to 200px, but it seems to grow past that regardless.</p>
  <p>Here is the source code for what i have so far:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* In an attempt to prevent row from expanding automatically */
  
  td {
    max-height: 100px;
  }
  
  .card-body {
    display: none;
    border: 2px solid black;
    height: 300px;
    width: 400px;
    z-index: 2;
  }
  
  .card-trigger:hover+.card-body {
    display: inline-block;
    position: relative;
    top: 0px;
    right: 15px;
  }
  
  .card-body:hover {
    display: block;
  }
  
  .card-body .game-info {
    display: none;
  }
  
  .card-body .dd-trigger:hover+.game-info {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;Ratings by som bol&lt;/h3&gt;
  &lt;p&gt;sort by release date (asc/desc), rating amout, game category, game creator, game console&lt;/p&gt;
  &lt;input type="text" placeholder="filter by game title, categories, creators, consoles, console makers"&gt;
  &lt;div&gt;Search hints&lt;/div&gt;
  &lt;table class="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Game title&lt;/th&gt;
        &lt;th&gt;your rating&lt;/th&gt;
        &lt;th&gt;Average rating&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;!-- Row 1 --&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;a class="card-trigger" href="#"&gt;Some Videogame&lt;/a&gt;
          &lt;div class="card-body"&gt;
  
            &lt;img src="#" alt="picture of the game in question" /&gt;
            &lt;h3&gt;&lt;a [routerLink]=""&gt;Game title&lt;/a&gt;&lt;/h3&gt;
            &lt;p&gt;Some stuff happens and you have fun&lt;/p&gt;
            &lt;span class="dd-trigger"&gt;Show more info&lt;/span&gt;
            &lt;ul class="game-info"&gt;
              &lt;li&gt;Average Rating: &lt;/li&gt;
              &lt;li&gt;Average Review Score: &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/td&gt;
  
        &lt;td&gt;
          your rating : 2
        &lt;/td&gt;
        &lt;td&gt;
          average rating : 3
        &lt;/td&gt;
        &lt;td&gt;&lt;button&gt;Delete rating&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;!-- Row 2 --&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;a class="card-trigger" href="#"&gt;Some Videogame&lt;/a&gt;
          &lt;div class="card-body"&gt;
  
            &lt;img src="#" alt="picture of the game in question" /&gt;
            &lt;h3&gt;&lt;a [routerLink]=""&gt;Game title&lt;/a&gt;&lt;/h3&gt;
            &lt;p&gt;Some stuff happens and you have fun&lt;/p&gt;
            &lt;span class="dd-trigger"&gt;Show more info&lt;/span&gt;
            &lt;ul class="game-info"&gt;
              &lt;li&gt;Average Rating: &lt;/li&gt;
              &lt;li&gt;Average Review Score: &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/td&gt;
  
        &lt;td&gt;
          your rating : 2
        &lt;/td&gt;
        &lt;td&gt;
          average rating : 3
        &lt;/td&gt;
        &lt;td&gt;&lt;button&gt;Delete rating&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;!-- row 3 --&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;a class="card-trigger" href="#"&gt;Some Videogame&lt;/a&gt;
          &lt;div class="card-body"&gt;
  
            &lt;img src="#" alt="picture of the game in question" /&gt;
            &lt;h3&gt;&lt;a [routerLink]=""&gt;Game title&lt;/a&gt;&lt;/h3&gt;
            &lt;p&gt;Some stuff happens and you have fun&lt;/p&gt;
            &lt;span class="dd-trigger"&gt;Show more info&lt;/span&gt;
            &lt;ul class="game-info"&gt;
              &lt;li&gt;Average Rating: &lt;/li&gt;
              &lt;li&gt;Average Review Score: &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/td&gt;
  
        &lt;td&gt;
          your rating : 2
        &lt;/td&gt;
        &lt;td&gt;
          average rating : 3
        &lt;/td&gt;
        &lt;td&gt;&lt;button&gt;Delete rating&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>