为什么我的桌子没有排线？

Question

我在代码中遇到问题。我是html和css的新手，所以问题是当我在浏览器中打开时，我的table在我的行之间没有显示任何行。

您可以在此处查看结果：

以下是我的代码的一部分：

<table class="table" border="1" style="background-color:#FFFFFF;border-collapse: collapse;;border:1px solid #000000;color:#000000;width:90%;" cellpadding="5" cellspacing="3">
    <th bgcolor="#545454">Header1</th>
    <th bgcolor="#545454">Header2</th>
    <th bgcolor="#545454">Header3</th>
    <th bgcolor="#545454">Header4</th>

    <tr>  
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td bgcolor="#D1D1D1">Table Cell</td>
        <td bgcolor="#D1D1D1">Table Cell</td>
        <td bgcolor="#D1D1D1">Table Cell</td>
        <td bgcolor="#D1D1D1">Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td bgcolor="#D1D1D1">Table Cell</td>
        <td bgcolor="#D1D1D1">Table Cell</td>
        <td bgcolor="#D1D1D1">Table Cell</td>
        <td bgcolor="#D1D1D1">Table Cell</td>
    </tr>
</table>

这是我的CSS：

.table{
    background-color:#FFFFFF;
    border-collapse: collapse;
    border:1px solid #000000;
    color:#000000;width:90%;
}

Answer 1

设置你的标签

td
{
border:solid 1px #000;
border-collapse:collapse;
}

这有助于

Answer 2

你只设置了.table样式。 尝试将td设计为。 FE

table, th, td {
   border: 1px solid black;
}

您还使用背景颜色为彼此设置样式。您也可以在css文件中执行此操作，而不是内联

tr:nth-child(odd) {
  bgcolor="#D1D1D1"
}