两种不同的桌子样式

时间:2011-02-25 00:52:29

标签: css css-tables

我有这样的表格:

table { width: 100%; border: 0; margin-bottom: 2em;  }

 table thead th
 {
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    padding: 10px;

    background-color: #263849 !important;

    color: #FFF;

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}       

table td { vertical-align: top; }

table tbody tr td { background: #f4f4f4;  border-bottom: 1px solid #D5D5D5;
border-top: 1px solid white; }

table th { padding: 10px 0; }
table tbody td { padding: 10px; }

table tr.even td { background: #F9F9F9; }

tr:nth-child(odd) { background-color:#F9F9F9; }
tr:nth-child(even) { background-color:#FFF; }

现在我在同一页面上想要另一张不同风格的桌子。

所以那个表我说调用是table class =“ver2”

我对这张不同的桌子进行设计的方式是什么?它开始做我的头。

1 个答案:

答案 0 :(得分:3)

您可以使用CSS定位特定样式到第二个表:

table.ver2    {/*whatever your declarations are...*/}
table.ver2 th {/*declarations*/}

等...

由于您决定使用类,因此需要对CSS规则使用句点符号。如果您选择使用'id'属性,则可以用井号(#)替换句点。