css HTML表格行周围的神秘边框

gupuwyp2  于 2022-12-24  发布在  其他
关注(0)|答案(2)|浏览(179)

我有一个相当简单的表格,有两行,每行有一个单元格。表格有一个彩色边框。顶行/单元格有一个白色背景。底行/单元格有一个彩色背景。问题是底行/单元格有一个我不想有的细的白色边框。有人能建议修改代码以去掉那个边框吗?我的代码如下所示,和here is a screenshot,紫色箭头指向我试图消除的边界。感谢您的任何建议。

<!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>

更新:感谢@Alohci,@lv_和@PleaseDontHurtMe.jpeg的快速回应。有趣的是,表格的border-spacing标签修复了在w3schools上预览时的问题,但是当我在Visual Studio中进行更改时,边界仍然存在。我不得不添加border-collapse标签来修复Visual Studio中的问题。啊,HTML的奥秘......

xpcnnkqh

xpcnnkqh1#

在您的.table1中试用border-collapse: collapse;

kb5ga3dv

kb5ga3dv2#

表格具有默认边框间距

.table1 {
  border-spacing: 0;
}

相关问题