title: HTML table with background color and transparent image: border on bottom
body: <p>I'm making a horizontal menu of buttons that need to have a background color behind them. The button image is a white box with a transparent circle in the middle where the color shows through. </p>
  
  <p>The actual button image will be more complex, so I can't just code the button.</p>
  
  <p>This method works fine with the image width set in px. But when I set the image width to 100% to make everything mobile responsive, I get blue borders on the bottom edge of each button. </p>
  
  <p>And sometimes on the other edges too: <a href="https://i.stack.imgur.com/2YIRy.png" rel="nofollow noreferrer">Screenshot example from chrome</a></p>
  
  <p>Here's a JSFiddle link: <a href="https://jsfiddle.net/3e4xv37d/#&amp;togetherjs=tatfPi7B6n" rel="nofollow noreferrer">https://jsfiddle.net/3e4xv37d/#&amp;togetherjs=tatfPi7B6n</a></p>
  
  <p>Code snippet:</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>@media only screen and (max-width: 600px) {
  body[yahoofix] body,table,td,p,a,li,blockquote {
  -webkit-text-size-adjust:none !important;
  }
  body[yahoofix] table {
  width: 100% !important;
  border-collapse: collapse !important;
  }
  body[yahoofix] #hidden {
  display: none;
  }
  body[yahoofix] #hidden-2 {
  display: none;
  }
  body[yahoofix] #hidden-3 {
  display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table align="center" border="0" cellpadding="0" cellspacing="0" width="700"&gt;
   &lt;tbody&gt;
    &lt;tr&gt;
    &lt;td valign="top"&gt;
     &lt;table border="0" cellpadding="0" cellspacing="0" width="100%"&gt;
      &lt;tbody&gt;
       &lt;tr&gt;
       &lt;td&gt;
        &lt;table border="0" cellpadding="0" cellspacing="0" width="480px" align="center"&gt;
         &lt;tbody&gt;
          &lt;td style="background-color: blue; overflow: hidden;"&gt;&lt;img src="http://i.imgur.com/8xPmSIR.png" width="100%" /&gt;&lt;/td&gt;
          &lt;td style="background-color: blue; overflow: hidden;"&gt;&lt;img src="http://i.imgur.com/8xPmSIR.png" width="100%" /&gt;&lt;/td&gt;
          &lt;td style="background-color: blue; overflow: hidden;"&gt;&lt;img src="http://i.imgur.com/8xPmSIR.png" width="100%" /&gt;&lt;/td&gt;
          &lt;td style="background-color: blue; overflow: hidden;"&gt;&lt;img src="http://i.imgur.com/8xPmSIR.png" width="100%" /&gt;&lt;/td&gt;
          &lt;td style="background-color: blue; overflow: hidden;"&gt;&lt;img src="http://i.imgur.com/8xPmSIR.png" width="100%" /&gt;&lt;/td&gt;
          &lt;td style="background-color: blue; overflow: hidden;"&gt;&lt;img src="http://i.imgur.com/8xPmSIR.png" width="100%" /&gt;&lt;/td&gt;
         &lt;/tbody&gt;
                          &lt;/table&gt;
  
       &lt;/td&gt;
                      &lt;/tr&gt;
      &lt;/tbody&gt;
     &lt;/table&gt;
    &lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance for any suggestions. Been looking everywhere and can't find any discussions on how to make this type of image work on responsive layouts.</p>