title: Have child of td element take up full width and height
body: <p>I have a <code>&lt;td&gt;</code> element with a little bit of padding, and I'd like to shade in the entire table cell when it's immediate child is a <code>&lt;mark&gt;</code> element.</p>
  
  <p>I'm using markdown to generate the table itself, so simply adding a class like <code>&lt;td class="highlight"&gt;</code> isn't really an option.</p>
  
  <h3>Basic Table Setup</h3>
  
  <p>Here's a basic table setup</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Type&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Ranger&lt;/td&gt;
        &lt;td&gt;Dog&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;mark&gt;Frida &lt;br/&gt; Kahtlo&lt;/mark&gt;&lt;/td&gt;
        &lt;td&gt;&lt;mark&gt;Cat&lt;/mark&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>With some basic CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>table {
      border-collapse: collapse;
  }
  table td, table th {
      border: 1px solid #ddd;
      padding: 8px;
      position: relative;
  }
  </code></pre>
  
  <h3>Attempt #1</h3>
  
  <p>One idea was to absolutely position the <code>&lt;mark&gt;</code> element and pin it to all four sides:</p>
  
  <pre class="lang-css prettyprint-override"><code>td &gt; mark {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      padding: 8px;
  }
  </code></pre>
  
  <p>However, it doesn't seem possible to <a href="https://stackoverflow.com/q/13545947/1366033">set the parent parent height from an absolutely positioned child</a>, so the contents overflows the <code>&lt;td&gt;</code></p>
  
  <p><a href="https://i.stack.imgur.com/34qJP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/34qJP.png" alt="example one"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
      border-collapse: collapse;
  }
  table td, table th {
      border: 1px solid #ddd;
      padding: 8px;
      position: relative;
  }
  
  td &gt; mark {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      padding: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Type&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Ranger&lt;/td&gt;
        &lt;td&gt;Dog&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;mark&gt;Frida &lt;br/&gt; Kahtlo&lt;/mark&gt;&lt;/td&gt;
        &lt;td&gt;&lt;mark&gt;Cat&lt;/mark&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h3>Attempt #2</h3>
  
  <p>Another idea was to reverse the padding with a negative margin like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>td &gt; mark {
      display: block;
      margin: -8px;
      padding: 8px;
  }
  </code></pre>
  
  <p>However, if there is a line wrap in another cell, I can't get the child element to occupy the full height available</p>
  
  <p><a href="https://i.stack.imgur.com/dLx2U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dLx2U.png" alt="example two"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
      border-collapse: collapse;
  }
  table td, table th {
      border: 1px solid #ddd;
      padding: 8px;
      position: relative;
  }
  
  td &gt; mark {
      display: block;
      margin: -8px;
      padding: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Type&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Ranger&lt;/td&gt;
        &lt;td&gt;Dog&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;mark&gt;Frida &lt;br/&gt; Kahtlo&lt;/mark&gt;&lt;/td&gt;
        &lt;td&gt;&lt;mark&gt;Cat&lt;/mark&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>Q: Any other ways that this might be possible?</em></p>