Problem with background image and <th> white space - html

Question

I have a Table and in the <thead> I have a background image, I have a coubple of rows and <th> this is the structure of my markup:
(Im using bootstrap by the way)
<table className="table">
<thead>
<tr>
<th colSpan="12">
<h3 className="table-title">POST APOCALYPTIC HIGHWAY</h3>
</th>
</tr>
<tr className="attributes">
<th className="position"></th>
<th className="img d-none d-sm-table-cell"></th>
<th className="fullname"></th>
<th className="bib text-center">Bib</th>
<th className="age d-none d-sm-table-cell text-center">
Age
</th>
<th className="gender text-center">Gender</th>
<th className="time text-center">Time</th>
<th className="score text-center">Score</th>
</tr>
{/** Ghost row to simulate margin */}
<tr style={{ height: "10px" }}>
<th colSpan="12"></th>
</tr>
</thead>
Im applying a background image through CSS to the <thead> this way:
.leaderboard thead {
background-image: url(./images/black-square-pattern.jpeg);
background-repeat: repeat;
color: #fff;
}
I also make sure there's 0 padding and margin in the <th> elements
.leaderboard thead th {
padding: 0;
margin: 0;
border: none;
}
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.