HTML/CSS中的表格边框

Question

我正在用HTML创建一个表,并尝试为单元格分配边框.这是它的出现方式.

在第2行,最后一个单元格中看到奇怪的边框.这就是我遇到的问题.

<table class="info">
    <tbody>
        <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
        </tr>
        <tr>
            <td><span>0</span></td>
            <td><span>0</span></td>
            <td><span>0</span></td>
            <td><span>0</span></td>
        </tr>
        <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
        </tr>
        <tr>
            <td><span>0</span></td>
            <td><span>0</span></td>
            <td><span>0</span></td>
            <td><span>0</span></td>
        </tr>
        <tr>
            <td>Some text</td>
            <td>Some text</td>
        </tr>
        <tr>
            <td><span>0</span></td>
            <td><span>0</span></td>
        </tr>
    </tbody>
</table>

这是我的CSS ....

table.info {
    width: 100%;
    text-align: center;
}

table.info td {
    background: #fff;
    border: 2px solid #ccc;
    text-align: center;
}

我在这里做错了什么？

更新 - 我检查了继承的css,我发现了这个......

table {
  border-collapse:collapse;
  border-spacing:0;
}

Answer 1

你的HTML不正确.要么你必须有相同的号码.您的每一行中的TD,或者您可以使用rowspan/colspan匹配标记.