title: Problem with background image and <th> white space
body: <p>I have a Table and in the <code>&lt;thead&gt;</code> I have a background image, I have a coubple of rows and <code>&lt;th&gt;</code> this is the structure of my markup:</p>
  <p>(Im using bootstrap by the way)</p>
  <pre><code>&lt;table className=&quot;table&quot;&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th colSpan=&quot;12&quot;&gt;
                      &lt;h3 className=&quot;table-title&quot;&gt;POST APOCALYPTIC HIGHWAY&lt;/h3&gt;
                    &lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr className=&quot;attributes&quot;&gt;
                    &lt;th className=&quot;position&quot;&gt;&lt;/th&gt;
                    &lt;th className=&quot;img d-none d-sm-table-cell&quot;&gt;&lt;/th&gt;
                    &lt;th className=&quot;fullname&quot;&gt;&lt;/th&gt;
                    &lt;th className=&quot;bib text-center&quot;&gt;Bib&lt;/th&gt;
                    &lt;th className=&quot;age d-none d-sm-table-cell text-center&quot;&gt;
                      Age
                    &lt;/th&gt;
                    &lt;th className=&quot;gender text-center&quot;&gt;Gender&lt;/th&gt;
                    &lt;th className=&quot;time text-center&quot;&gt;Time&lt;/th&gt;
                    &lt;th className=&quot;score text-center&quot;&gt;Score&lt;/th&gt;
                  &lt;/tr&gt;
                  {/** Ghost row to simulate margin */}
                  &lt;tr style={{ height: &quot;10px&quot; }}&gt;
                    &lt;th colSpan=&quot;12&quot;&gt;&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
  </code></pre>
  <p>Im applying a background image through CSS to the <code>&lt;thead&gt;</code> this way:</p>
  <pre><code>.leaderboard thead {
    background-image: url(./images/black-square-pattern.jpeg);
    background-repeat: repeat;
    color: #fff;
  }
  </code></pre>
  <p>I also make sure there's 0 padding and margin in the <code>&lt;th&gt;</code> elements</p>
  <pre><code>.leaderboard thead th {
      padding: 0;
      margin: 0;
      border: none;
  }
  </code></pre>
  <p>It looks okay in desktop but for some reason when I test it in Google chrome inspecter the different mobile previews I see some tiny white spaces between the cells, I cannot find why it's happening, any idea how to fix it? I also tested in Safari and the same happens.</p>
  <p><a href="https://i.stack.imgur.com/9mSoq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9mSoq.png" alt="white spaces between th elements" /></a></p>