Question

我正在使用具有不同属性的多个表。问题是我的所有表格似乎都是从一个类中获得属性，“可观察”。特别是边境，我不希望任何其他类别的边界。如何正确分配多个表？

HTML

/*I only need a table here to keep it centered in the page, so i want no border*/ 
<table class="bantable">
<tr>
<td align="middle">
<div id="container">     
    <!-- Each image is 350px by 233px -->  
    <div class="photobanner">
        <img class="first" src="/banner/AA.JPG" alt="">
        <a target="_blank" href="P1010011.JPG">
    </div>
</div>
</td>
</tr>
</table>

/*this one i want the border in*/
<table class="spectable">
  <tr>
    <th>Type</th>
    <td>GMC 7000 Dump Truck</td>
  <tr>
    <th>Stock#</th>
    <td>70017</td>
    <th>Condition</th>
    <td>N/A</td>
  </tr>
  <tr>
</table>

CSS

table.bantable  table, td, th, tr
{
  border: none;
}

table.spectable  table, td, th 
{
  border: 3px solid #fdff30;
}

table.spectable th 
{
  background-color: #fdff30;
  color: black;
}

Answer 1

你使用td，th，表选择器的方式是错误的。像下面一样更新你的CSS。

 table.bantable, table.bantable td, table.bantable th, table.bantable tr
 {
  border: none;
 }

 table.spectable, table.spectable td, table.spectable th 
 {
   border: 3px solid #fdff30;
  }

 table.spectable th 
 {
   background-color: #fdff30;
   color: black;
 }

Answer 2

您的选择器中似乎使用了逗号。

请看这个小提琴，了解它的变化示例：http://jsfiddle.net/6GVRr/

table.bantable td, table.bantable th, table.bantable tr
{
  border: none;
}

table.spectable td, table.spectable th 
{
  border: 3px solid #fdff30;
}

table.spectable th 
{
  background-color: #fdff30;
  color: black;
}

无法为表分配多个类

2 个答案: