title: Table row borders in HTML5 without gaps
body: <p>This seems trivial enough, but I can't seem to stumble upon the answer.</p>
  
  <p>I want to have lines separating my rows in an HTML table, and nothing more. Simple enough, right? </p>
  
  <p>Some Googling brought me upon the table attribute <code>rules</code>, but apparently <a href="http://www.w3schools.com/html5/tag_table.asp" rel="nofollow noreferrer">this isn't supported in HTML5</a>.</p>
  
  <p>So I searched deeper into CSS and realized I could put borders around the <code>tr</code>'s, right? Well no, not only does that not work but <a href="https://stackoverflow.com/a/1384825/1222420">many SO threads</a> | <a href="https://stackoverflow.com/a/2834645/1222420">assured me its a bad idea</a>. </p>
  
  <p>Logically I played with <em>their</em> solutions, which involved different combinations of <code>tr { border-bottom ...</code>, but I always end up with this tiny, obnoxious gap. What gap? There's about a pixel or two gap between the two <code>td</code>'s (where a line separating columns would be). This may not seem like a big deal, but it seems unnecessary and I can't stop noticing it.  For whatever reason however, it doesn't appear in jsfiddle, so I suggest trying this in notepad and opening it in the browser.</p>
  
  <p>Am I making a silly mistake? Is it a typo? Just my computer? Any help would be greatly appreciated... I've been staring at this for too long. </p>
  
  <p>Here's my test file that I've been mostly testing in Chrome and Android. It really needs to work in both, as this will also run in a Phonegap app that renders HTML5 in the phone browser.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          td, th {
              border-bottom: 1px solid black !important;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;th&gt;Item&lt;/th&gt;
              &lt;th&gt;Aisle&lt;/th&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td&gt;Cookies&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Crackers&lt;/td&gt;
              &lt;td&gt;6&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Milk&lt;/td&gt;
              &lt;td&gt;8&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Cereal&lt;/td&gt;
              &lt;td&gt;2&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>