爲什麼我無法設計我所指的表格？

我得到的第一個問題是，我沒有將表格稱爲「tb2」。請注意，我通過調用第一個表「tb1」和另一個「tb2」來區分這兩個表，因此我不明白爲什麼這兩個表都會受到影響。爲什麼我無法設計我所指的表格？

第二個問題是我的表格邊框不是10px純綠色，正如我聲明的那樣。那可能是因爲「tb1」中的邊界（我甚至沒有在代碼中提到）與我試圖創建的新邊界相沖突嗎？

如果有人能解決這個謎，請，我需要你的幫助！我卡住了！

<!doctype html> 
<html> 
    <head> 
     <style type="text/css"> 
      #tb2 table {border:10px solid green;} 
      tr {background-color:black;} 
      th {color:white;} 
      td {border:5px dotted red;color:white;} 
     </style> 
    </head> 
    <body> 
     <table id="tb1" border="5" 
     width="50%" height="200" cellpadding="10" cellspacing="3"> 
     <tr><th colspan="3"><h2>Fruit!</h2></th></tr> 
     <tr> 
      <th>Strangers</th> 
      <th>Friends</th> 
      <th>Family</th> 
     </tr> 
      <td>Lemon</td> 
      <td>Pear</td> 
      <td>Blueberry</td> 
     </tr> 
      <td>Plum</td> 
      <td>Apple</td> 
      <td>Strawberry</td> 
     </tr> 
     </table> 
     <table id="tb2"> 
     <tr><th colspan="3"><h2>Fruit!#2</h2></th></tr> 
     <tr> 
      <th>Strangers</th> 
      <th>Friends</th> 
      <th>Family</th> 
     </tr> 
      <td>Lemon</td> 
      <td>Pear</td> 
      <td>Blueberry</td> 
     </tr> 
      <td>Plum</td> 
      <td>Apple</td> 
      <td>Strawberry</td> 
     </tr> 
     </table> 
    </body> 
</html>

來源

2015-01-26 Deezhan

您的CSS選擇器是錯誤的。該表的ID爲'tb2'，所以沒有理由在您的選擇器中使用單詞'table'。它應該是'＃tb2'你當前的選擇器的唯一方法就是如果你的桌子周圍有一個包含id的元素爲'tb2'的元素。 – user13286 2015-01-26 21:27:57

是的，只是在＃tb2之後刪除「表格」 – 2015-01-26 21:30:18

試試這個：

#tb2 {border:10px solid green;} 
tr {background-color:black;} 
th {color:white;} 
td {border:5px dotted red;color:white;}

因爲元素「＃TB2」被直接應用到您的表，你不需要指定「表」

來源

2015-01-26 21:30:55 Bioto

您使用#tb2 table選擇器將選擇「tb2」的id元素中的所有表。在你的情況下，你想要table#tb2，它將選擇所有id「tb2」表。

就語義去說，您可以從選擇器中刪除table，因爲id理想情況下只能引用頁面上的一個元素。這會讓你在#tb2作爲你的選擇。

更新：這將反映您正在尋找的更容易實現。 http://jsfiddle.net/hzdxL18h/2/

#tb1 { 
    border: 5px solid black; 
    width: 50%; 
    height: 200px; 
    border-spacing: 3px; 
    border-collapse: separate; 
} 
#tb1 td, #tb1 tr, #tb1 th { 
    padding: 10px; 
    border: 1px solid black; 
} 
#tb2 { border: 10px solid green; } 
#tb2 tr { background-color: black; } 
#tb2 th { color: white; } 
#tb2 td { border: 5px dotted red; color: white; }

<body> 
    <table id="tb1"> 
    <tr> 
     <th colspan="3"> 
     <h2>Fruit!</h2> 
     </th> 
    </tr> 
    <tr> 
     <th>Strangers</th> 
     <th>Friends</th> 
     <th>Family</th> 
    </tr> 
    <tr> 
     <td>Lemon</td> 
     <td>Pear</td> 
     <td>Blueberry</td> 
    </tr> 
    <tr> 
     <td>Plum</td> 
     <td>Apple</td> 
     <td>Strawberry</td> 
    </tr> 
    </table> 
    <table id="tb2"> 
    <tr> 
     <th colspan="3"> 
     <h2>Fruit!#2</h2> 
     </th> 
    </tr> 
    <tr> 
     <th>Strangers</th> 
     <th>Friends</th> 
     <th>Family</th> 
    </tr> 
    <tr> 
     <td>Lemon</td> 
     <td>Pear</td> 
     <td>Blueberry</td> 
    </tr> 
    <tr> 
     <td>Plum</td> 
     <td>Apple</td> 
     <td>Strawberry</td> 
    </tr> 
    </table> 
</body>

來源

2015-01-26 21:38:22

但是正如您所看到的，我有兩個與衆不同的表格名稱：一個是「tb1」，另一個是「tb2」。如果我想改變「tb2」而不是「tb1」，我該怎麼做？正如我的代碼所述，我不想在兩個表上都有綠色邊框，黑色背景等等，我只是希望它在「tb2」上。當我只想修改其中一個時，導致兩者都改變外觀的問題是什麼？ – Deezhan 2015-01-26 22:23:56

正如我的回答指出'＃tb2'只會選擇「tb2」的ID。這不會選擇一個不同的ID，在你的情況下「tb1」。 – 2015-01-27 18:25:23

我總是喜歡使用IDS的JavaScript和帶班工作了風格。所以然後嘗試使用class =「tb2」而不是id =「tb2」。另外，我不確定你是否可以使用#tb2 表格設計一個元素。我認爲你需要省略其中的一個。我嘗試這樣做：

<style type="text/css"> 
    .tb1 {border:10px solid green;} 
    tr {background-color:black;} 
    th {color:white;} 
    td {border:5px dotted red;color:white;} 
</style> 
</head> 
<body> 
    <table class="tb1" border="5" 
    width="50%" height="200" cellpadding="10" cellspacing="3"> 
    <tr><th colspan="3"><h2>Fruit!</h2></th></tr>`

或者你也可以試試：

<style type="text/css"> 
     #tb1 {border:10px solid green;} 
     tr {background-color:black;} 
     th {color:white;} 
     td {border:5px dotted red;color:white;} 
    </style> 
</head> 
<body> 
    <table id="tb1" border="5" 
    width="50%" height="200" cellpadding="10" cellspacing="3"> 
    <tr><th colspan="3"><h2>Fruit!</h2></th></tr>

希望它能幫助！

來源

2015-01-26 21:42:24 Marc

謝謝大家的超級快速回復！:)不能相信我是如此盲目！但是，我仍然不明白爲什麼兩張表格都只有一種表達方式：/任何想法？ – Deezhan 2015-01-26 22:12:01

@Deezhan你是什麼意思，「當我只指一個時，兩個表格都是風格的」？ – TylerH 2015-01-26 22:14:10

@Deezhan現在只有'tr'，'th'和'td's應該是樣式的，10px邊框將不會存在於任何一個表格中，因爲沒有任何元素匹配該選擇器。另外，你的'tr'，'th'和'td'的CSS會影響這兩個表，因爲你沒有指定在這些規則中定位哪個表ID。 – user13286 2015-01-26 22:33:57

謝謝大家的幫忙！一塊一塊地，拼圖解決了，感謝大家！這是我尋找的最終結果：

<!doctype html> 
<html> 
    <head> 
     <style type="text/css"> 
      #tb2 {border:10px solid green;} 
      #tr2 {background-color:black;} 
      #th2 {color:white;} 
      #td2 {border:5px dotted red;color:white;} 
     </style> 
    </head> 
    <body> 
     <table id="tb1" border="5" 
     width="50%" height="200" cellpadding="10" cellspacing="3"> 
     <tr><th colspan="3"><h2>Fruit!</h2></th></tr> 
     <tr> 
      <th>Strangers</th> 
      <th>Friends</th> 
      <th>Family</th> 
     </tr> 
      <td>Lemon</td> 
      <td>Pear</td> 
      <td>Blueberry</td> 
     </tr> 
      <td>Plum</td> 
      <td>Apple</td> 
      <td>Strawberry</td> 
     </tr> 
     </table> 
     <table id="tb2"> 
     <tr id="tr2"><th id="th2" colspan="3"><h2>Fruit!#2</h2></th></tr> 
     <tr id="tr2"> 
      <th id="th2">Strangers</th> 
      <th id="th2">Friends</th> 
      <th id="th2">Family</th> 
     </tr> 
     <tr id="tr2"> 
      <td id="td2">Lemon</td> 
      <td id="td2">Pear</td> 
      <td id="td2">Blueberry</td> 
     </tr> 
     <tr id="tr2"> 
      <td id="td2">Plum</td> 
      <td id="td2">Apple</td> 
      <td id="td2">Strawberry</td> 
     </tr> 
     </table> 
    </body> 
</html>

來源

2015-01-26 22:53:18 Deezhan

爲什麼我無法設計我所指的表格？

回答

相關問題