Inconsistent border width between table rows after collapsing the cell border

59 views Asked by At

I'm having the issue that my table borders act differently after collapsing it. enter image description here

It seems the bottom border width of second row is slightly thicker than the rest, I tried changing the border style but still couldn't identify the issue. Here is my code:

table {
    background-color: burlywood;
    height: 200px;
    width: 600px;
    border: 1px solid black;
    text-align: center;
    border-collapse: collapse;
}

table > tbody > tr > td {
    border: 1px solid black;
}
<table>
    <tbody>
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
            <td>cell 3</td>
        </tr>
        <tr>
            <td>cell 4</td>
            <td>cell 5</td>
            <td>cell 6</td>
        </tr>
        <tr>
            <td>cell 7</td>
            <td>cell 8</td>
            <td>cell 9</td>
        </tr>
        <tr>
            <td>cell 10</td>
            <td>cell 11</td>
            <td>cell 12</td>
        </tr>
    </tbody>
</table>

My goal is to make all border width consistent, thanks for anyone helping me on this.

0

There are 0 answers