Visual Studio Code - Mystery Border Around HTML Table Row

gurs
December 21, 2022
283 views
0 votes
2 Answers

I have a fairly simple table with two rows, each of which has one cell. The table has a colored border. The top row/cell has a white background. The bottom row/cell has a colored background. The problem is that the bottom row/cell has a thin, white border that I do not want there. Can anyone suggest a code modification to get rid of that border? My code is below, and here is a screenshot with the purple arrows pointing to the border that I am trying to eliminate. Thanks for any suggestions.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .table1 {
            border: 4px solid #FF7C7C;
            float: initial;
        }
        .td1 {
            width: 530px;
            padding: 5px 35px 5px 35px;
            font-family: verdana, geneva, sans-serif; 
            font-size: 16px; 
            line-height: 22px;
            color: #62605d;
            text-align: left;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <table class="table1">
        <tr class="td1">
            <td class="td1" style="text-align: center;">
                Text line 1.<br />
                Text line 2.<br />
                Text line 3.
            </td>
        </tr>
        <tr style="border-style: none;">
            <td class="td1" style="border: none; border-spacing: 0px; background-color: #FF7C7C; color: #ffffff; font-size: 11px; text-align: center;">
                Text line 1.<br />
                Text line 2.<br />
                Text line 3.
            </td>
        </tr>
    </table>
</body>
</html>

UPDATE: Thank you to @Alohci, @lv_ and @PleaseDontHurtMe.jpeg for those quick responses. Interestingly, the border-spacing tag for table fixed the problem when previewed on w3schools, but when I made the change in Visual Studio the border remained. I had to add the border-collapse tag to fix it for Visual Studio. Ah, the mysteries of HTML…