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 >
<tr >
<td style="text-align: center;">
Text line 1.<br />
Text line 2.<br />
Text line 3.
</td>
</tr>
<tr style="border-style: none;">
<td 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...
CodePudding user response:
Try border-collapse: collapse;
in your .table1
CodePudding user response:
Table has default border-spacing
.table1 {
border-spacing: 0;
}