HTML/CSS中的表格边框

我正在用HTML创建一个表，并试图给单元格分配一个边框。下面是它的样子

看到第二排最后一个牢房的奇怪边框了吗。这就是我面临的问题

<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 {
  border-collapse:collapse;
  border-spacing:0;
}

---

您的HTML不正确。您必须在每一行中有相同数量的TDs，或者您可以使用rowspan/colspan匹配标记。

好的，我已经测试过了。。而且它在firefox上不起作用。。但是chrome和ie允许您使用每行具有不同列数的表。。。正如@chinmayee所说，这样做是不正确的，因为表格只用于表示表格数据。。我建议您更改html并使用div和float来获得您想要的效果

祝你好运，也许这会有帮助：

（HTML）

---

对于最后两行，创建一个colspan=2的单元格。如下所示：

<tr>
      <td><span>0</span></td>
      <td><span>0</span></td>
      <td colspan="2"></td>
  </tr>

0
0

什么浏览器？它在我的FF3.6上工作。@bobby-我的也是3.6。3.6.12待批准precise@bobby-其工作在Chrome@ShiVik：相同的FF版本…这很奇怪。可能是其他css设置干扰了它？@ShiVik:Ah，是

边框折叠
设置影响了它。hmmmm。好的，我试试看。但这不是我想要的答案——并不能解决问题，而是改变了我的规范，但如果它有效的话——见鬼。谢谢汉克斯·伊万。这对我来说非常有效——虽然打破了“表表示表格数据”的概念，但不需要我更改已经编写的代码。谢谢。
<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>
          <td colspan="2" class="empty">&nbsp;</td>
      </tr>
      <tr>
          <td><span>0</span></td>
          <td><span>0</span></td>
          <td colspan="2" class="empty">&nbsp;</td>
      </tr>
  </tbody>

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

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

table.info .empty {
  border:none;
}

<tr>
      <td><span>0</span></td>
      <td><span>0</span></td>
      <td colspan="2"></td>
  </tr>