CSS: two ways to set non-overlapping borders (single-line borders) for tables

When we encounter the situation of setting a border for the table, the effect is always not up to expectations; for example, it is thickened due to repeated settings, which destroys the overall effect. Let me share with you the next two CSS styles for setting a single-line border. Friends can refer to it, I hope it will be helpful to everyone.

Most of us will encounter the situation of setting a border for the table, but the effect is always not up to expectations. For example, certain lines will be thickened due to repeated settings, destroying the overall effect. Below I will introduce two CSS styles for setting single-line borders:

The first method:¶

table{
    border-collapse:collapse;
}
table tr{
    border:1px solid red;
}

The second method¶

table tr td{
    border-top:1px solid red;
}
table{
    border:1px solid red;
    border-top-width:0px;
}