I am encountering an issue where the border width for each table row is alternating instead of remaining a solid 1px. This inconsistency is puzzling to me, especially since I am testing it on Chrome. Any insights on why this is happening?
table {
border-collapse: collapse;
}
.compositeEventContainer table tbody tr {
border-bottom: 1px solid;
}
<div class="compositeEventContainer">
<table>
<tbody>
<tr>
<td>first</td>
<td>1</td>
<td>Test</td>
</tr>
<tr>
<td>second</td>
<td>2</td>
<td>Test</td>
</tr>
<tr>
<td>third</td>
<td>3</td>
<td>Test</td>
</tr>
<tr>
<td>fourth</td>
<td>4</td>
<td>Test</td>
</tr>
<tr>
<td>fifth</td>
<td>5</td>
<td>Test</td>
</tr>
<tr>
<td>sixth</td>
<td>6</td>
<td>Test</td>
</tr>
</tbody>
</table>
</div>
I am currently working on Windows and using Chrome as my browser.