Question

我遇到的第一个问题是我没有将表格称为“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>

Answer 1

试试这个：

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

因为元素＆＃34;＃tb2＆＃34;直接应用于您的表格，您无需指定＆＃34; table＆＃34;

Answer 2

您正在使用的选择器#tb2 table将选择元素内的所有表格，其中id为“tb2”。在您的情况下，您需要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>

Answer 3

我总是喜欢使用id用于javascript，并使用类来计算样式。那么尝试使用class =＆＃34; tb2＆＃34;而不是id =＆＃34; tb2＆＃34;。另外，我不确定你是否可以使用#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>

希望它有所帮助！

Answer 4

谢谢大家的帮助！一块一块，这个难题得到了解决，感谢大家！这是我一直在寻找的最终结果：

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

为什么我无法对我指的桌子进行打样？

4 个答案: