title: Responsive images in table using bootsrap
body: <p>I have</p>
  
  <pre><code>----------------
       header
  ----------------
  | t1 | t2 | t3 |
  ----------------
  | i1 | i2 | i3 |
  </code></pre>
  
  <p>I need (via bootstrap, or direct css) the bottom images to be "responsive" (resize after the content width)</p>
  
  <p>Here is my code (Plunker <a href="https://plnkr.co/edit/z0ojRuzClOlcZ9B0wUHn?p=preview" rel="nofollow noreferrer">here</a>).
  I tried <code>width:100%;</code> on <code>td</code> and <code>img-responsive</code> on <code>img</code>, but it didn't work.</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-html lang-html prettyprint-override"><code>  &lt;link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /&gt;
    &lt;script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
    &lt;table style="width:100%"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th colspan=3 class="text-center"&gt;My Pics&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th class="text-center"&gt;Trees&lt;/th&gt;
          &lt;th class="text-center"&gt;Cats&lt;/th&gt;
          &lt;th class="text-center"&gt;Bulding&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td style="width:100%;" class="text-center"&gt;&lt;img class="img-responsive" src="https://unsplash.it/164/90"/&gt;&lt;/td&gt;
          &lt;td style="width:100%;" class="text-center"&gt;&lt;img class="img-responsive" src="https://unsplash.it/164/91"/&gt;&lt;/td&gt;
          &lt;td style="width:100%;" class="text-center"&gt;&lt;img class="img-responsive" src="https://unsplash.it/164/92"/&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>