HTML/CSS中的表格邊框

我正在HTML中創建一個表格，並試圖爲單元格分配一個邊框。這是它的表現。HTML/CSS中的表格邊框

alt text

看到，在第二行怪異的邊界，最後一個單元格。這是我遇到的問題。

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

來源

2010-11-08 vikmalhotra

什麼瀏覽器？它正在使用我的FF3.6。 – Bobby 2010-11-08 08:33:00

@bobby - 我的也是3.6。 3.6.12準確地說 – vikmalhotra 2010-11-08 08:36:57

@bobby - 它在Chrome上的工作 – vikmalhotra 2010-11-08 08:38:02

也許這將有所幫助：

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

來源

2010-11-08 08:49:31 niksy

謝謝伊萬。這對我來說非常合適 - 雖然打破了「表格表格數據表格」的概念，但並不要求我改變已經寫好的代碼。非常感謝。 – vikmalhotra 2010-11-08 09:02:51

你的HTML是不正確的。要麼你必須擁有同等的號碼。的TD中，或者您可以使用rowspan/colspan匹配標記。

來源

2010-11-08 08:31:39

hmmmm。好的會嘗試。不是我正在尋找的答案 - 並沒有解決問題，而是改變了我的規範，但是如果它有效 - 到底是什麼。謝謝 – vikmalhotra 2010-11-08 08:49:12

好的我測試了它..它不能在firefox上工作..但是Chrome和ie允許你在每一行上使用不同列數的表......正如@chinmayee所說，它不正確的做到這一點，原因表只用於表示表格數據..我會sugest你改變你的HTML和使用的div浮動，以獲得您想要的效果..

好運

來源

2010-11-08 08:44:10 pleasedontbelong

在最後2行作出這樣與合併單元格= 2..something細胞：

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

來源

2010-11-08 08:52:25

HTML/CSS中的表格邊框

回答

相關問題