HTML/CSS 中的表格边框答案

【问题标题】：Table Border in HTML/CSSHTML/CSS 中的表格边框
【发布时间】：2011-05-06 13:17:32
【问题描述】：

我正在用 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.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;
}

【问题讨论】：

什么浏览器？它适用于我的 FF3.6。
@bobby - 我的也是 3.6。 3.6.12 准确地说
@bobby - 它在 Chrome 上工作
@ShiVik：这里是相同的 FF 版本……这很奇怪。也许进一步的 css 设置会干扰它？
@ShiVik：啊，是 border-collapse 设置搞砸了。

标签： html html-table border

【解决方案1】：

对于最后 2 行，使用 colspan=2.. 制作一个单元格，如下所示：

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

【讨论】：

【解决方案2】：

也许这会有所帮助：

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

(CSS)

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

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

table.info .empty {
  border:none;
}

【讨论】：

谢谢伊万。这对我来说非常有效 - 虽然打破了“表格表示表格数据”的概念，但不需要我更改已经编写的代码。非常感谢。

【解决方案3】：

好的，我已经对其进行了测试..它不适用于firefox..但是chrome和ie允许您使用每行具有不同列数的表格...正如@chinmayee所说，这样做是不正确的，因为表格仅用于表示表格数据。我建议您更改 html 并使用带有浮点数的 div 来获得您想要的效果..

祝你好运

【讨论】：

【解决方案4】：

您的 HTML 不正确。要么你必须有相等的没有。每行中的 TD 数量，或者您可以使用 rowspan/colspan 匹配标记。

【讨论】：

嗯。好的会尝试的。虽然不是我正在寻找的答案 - 没有解决问题，而是改变了我的规范，但如果它有效 - 到底是什么。谢谢