title: How to make images size equal in table HTML
body: <p>I am using HTML to make a table with images and I want these images to be the same size but I obtain this:</p>
  <p><a href="https://i.stack.imgur.com/q4gJz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q4gJz.png" alt="images" /></a></p>
  <p>The images have the same resolution and my CSS is like this:</p>
  <pre><code> img {   
    display: block;
    margin: 10px auto;
    width: 50%;   
    height:50%;     
   }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;table&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
          
          &lt;td style=&quot;vertical-align:middle;color: #666633; text-align: center; font-weight: bold; &quot;&gt;name1&lt;/td&gt;
          &lt;td style=&quot;vertical-align:middle;color: #666633; text-align: center; font-weight: bold; &quot;&gt;name2&lt;/td&gt;
  &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;td&gt;&lt;img src=&quot;../assets/img/image1.jpg&quot; alt=&quot;image&quot;&gt;&lt;/td&gt;
  
          &lt;td&gt;&lt;img src=&quot;../assets/img/image2.jpg&quot; alt=&quot;image&quot; &gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-success btn-sm&quot; [routerLink]= &quot;['/detail',100]&quot; style=&quot;margin-bottom:50px&quot;&gt;View&lt;/button&gt;&lt;/td&gt;
  
          &lt;td&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-success btn-sm&quot; [routerLink]= &quot;['/detail',101]&quot; style=&quot;margin-bottom:50px&quot;&gt;View&lt;/button&gt;&lt;/td&gt;
        &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>