HTML表格中沒有水平邊框線的一列

我試圖設計下面的表格，但是我無法避免造型每一個單元格。所有細胞之間應該有一條邊界線，除了來自例如第四列。此外，我試圖讓表格斑馬條紋的兩部分（它不顯示在下面的佈局）。HTML表格中沒有水平邊框線的一列

┌───┬───┬───┐ ┌───┬───┬───┐ 
├───┼───┼───┤ ├───┼───┼───┤ 
├───┼───┼───┤ ├───┼───┼───┤ 
├───┼───┼───┤ ├───┼───┼───┤ 
├───┼───┼───┤ ├───┼───┼───┤ 
├───┼───┼───┤ ├───┼───┼───┤ 
├───┼───┼───┤ ├───┼───┼───┤ 
├───┼───┼───┤ ├───┼───┼───┤ 
└───┴───┴───┘ └───┴───┴───┘

什麼是最有效的方法呢？

更新。我接受海梅的答案和修改建議代碼位：

<style> 
.tbl   { border-collapse:collapse; } 
.tbl tr   { background-color: red; } 
.tbl tr.stripe { background-color: green; } 
.tbl td   { border:solid 1px black; } 
.tbl td.none { border-style:none; background-color: white; } 
</style> 

<table class="tbl"> 
<tr> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td class="none">4</td> 
<td>5</td> 
<td>6</td> 
<td>7</td> 
</tr> 
<tr class="stripe"> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td class="none">4</td> 
<td>5</td> 
<td>6</td> 
<td>7</td> 
</tr> 
</table>

不知道這是正確的，以顯式地設置td.none背景爲白色，但我不知道它是否可以指定元素的背景應該是與頁面的背景相同。

來源

2011-03-22 10p

它看起來像兩個表格，也許你應該創建兩個表格 – LostLin 2011-03-22 18:50:21

你可能會在你的表格中找到具有「col」和「colgroup」HTML標籤的地方，以及基於這些標籤的樣式。我會測試和回答，但現在沒有時間。 – 2011-03-22 18:52:42

@Luke - 兩張表不會這樣做，因爲當表格被調整大小時，左表的第一行可以佔用3行，右表第一行的文本爲1行，因此行將不在行。 – 10p 2011-03-22 20:08:08

這裏是一個可能的解決方案：

<style> 

.tbl { 
    border-collapse:collapse; 
} 

.tbl td { 
    border:solid 1px red; 
} 

.tbl td.none { 
    border-style:none; 
} 

</style>

與HTML：

<table class="tbl"> 
<tr> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td class="none">4</td> 
<td>5</td> 
<td>6</td> 
<td>7</td> 
</tr> 
</table>

來源

2011-03-22 18:53:11 Jaime

列組http://www.w3.org/TR/html4/struct/tables.html#colgroups可以幫助你達到你所需要的，因爲你可以指定特定列的樣式。一個例子在這裏提供：http://www.w3.org/TR/html4/struct/tables.html#sample

來源

2011-03-22 19:00:30 quarkdown27

然而，似乎列組不能幫助這個特定的要求 - 我發佈問題之前檢查它。 – 10p 2011-03-22 20:38:51

因爲我不知道你的HTML標記，我不知道如果你的<TR>的單獨設置id■如果你保持一個共同的class屬性，這將讓你做了像海梅建議的事情。

如果沒有，你已經依賴於jQuery的，你可能會喜歡這樣的事情（如果我理解正確的話）：

<html> 
    <head> 
     <style type="text/css"> 
     table { border-collapse: collapse; } 
     td { border: solid grey 1px; } 
     td.none { border: none; } 
     </style> 
     <script src="http://code.jquery.com/jquery-1.5.js"></script> 
    </head> 
    <body> 
     <table> 
      <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
      <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
      <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
      <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
      <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> 
     </table> 
     <script>$("td:nth-child(4)").addClass("none");</script> 
    </body> 
</html>

來源

2011-03-22 19:03:18

這會放棄第4列的邊界。如果您需要爲每四列執行一次，請將'td：nth-child（4）'更改爲'td：nth-child（4n）'。 – 2011-03-22 19:11:16

謝謝，朋友，但我沒有使用jQuery。應該可能開始學習它。據我所知，你的答案不會沒有jQuery的工作？ – 10p 2011-03-22 20:30:57

事實上，它不會，而僅僅爲了這件事情而使用jQuery是最有可能矯枉過正的。正如DA指出的那樣，它可以在純CSS中使用，但瀏覽器的支持還是馬馬虎虎（IE9 +，FF3.5 +，Safari 3+）。對於一個面向公衆的網站，我不會用純CSS來指望它。 – 2011-03-22 20:38:08

CSS 3將做到這一點：

td:nth-child(4) { 
    ...styles that will apply to the fourth TD... 
}

來源

2011-03-22 19:14:06

我很樂意使用你的答案，DA，但它似乎在IE中不起作用。 – 10p 2011-03-22 20:36:34

HTML表格中沒有水平邊框線的一列

回答

相關問題