表css格式

Question

#table1
{
  font-family: Calibri;
  font-size: 12pt;
  font-style: normal;
  text-align:center;
  width:500px;
  border-collapse: collapse;
  border: 3px solid orange;
  margin-right:80px
}

table,th,td{
  font-family: Calibri;
  font-size: 12pt;
  font-style: normal;
  text-align:center;
  width:500px;
  border-collapse: collapse;
  border: 3px solid red;
  margin-right:80px
}

我正在使用2种不同类型的表，有2种不同的颜色，但每当我尝试将th,td放入表中的任何一个表时，所有表都会得到与th,td表相同的颜色。

如何自定义每个表？

Answer 1

您可以按照以下方式使用

//css

        .table1{
           //table1 style
        }
        .table1 th{
        //th style for table1 class
        }
        .table1 td{
        //set color for table1
        }

        .table2{
        }
        .table2 th{
        //set your color
        }
        .table2 td{
        //set color for table1
        }

    //html code

        <table class="table1">
        <tr>
          <th>...</th>
        </tr>
        <tr>
          <td>...</td>
        </tr>
        </table>

        <table class="table2">
        <tr>
          <th>.... </th>
        </tr>
        <tr>
          <td>...</td>
        </tr>
        </table>

Answer 2

SAMPLE TABLE FIDDLE

<table class="mytable"></table>

.mytable, mytable.th, mytable.td
{
 //some codes
}

<table id="table1"></table>
#table1
{
//some codes
}