Question

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

alt text

在第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匹配标记。

Answer 2

最后2行创建一个colspan = 2的单元格。这样的东西：

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

Answer 3

好吧我已经测试了它..它不能在firefox上工作..但是chrome和ie允许你在每一行使用不同列数的表...就像@chinmayee说的那样，这样做不正确，原因表只用于表示表格数据..我会为你改变你的html并使用带浮点数的div来获得你想要的效果..

祝你好运

Answer 4

也许这会有所帮助：

（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;
}

HTML / CSS中的表格边框

4 个答案: