Установить стиль CSS для таблицы

Question

У меня есть несколько таблиц на странице HTML. Но для каждой таблицы я хотел бы применить другой стиль CSS. Если я использую этот код, я буду применять стиль для каждой таблицы.

th, td { 
    padding-right: 10px; 
    padding-top: 7px; 
    padding-bottom: 7px; 
} 

Как я могу применить стиль только для одной таблицы?

Я попробовал этот

.intro{ 
    th, td { 
     padding-right: 10px; 
     padding-top: 7px; 
     padding-bottom: 7px; 
     /* margin: 10px;*/ 
    }} 

Answer 1

Используйте class или id для требуемой таблицы. Проверьте пример ниже.

.mystyle th, 
 
.mystyle td { 
 
    padding-right: 10px; 
 
    padding-top: 7px; 
 
    padding-bottom: 7px; 
 
    background-color: palegreen; 
 
}

<b><i>Only this table will have the specified styles</i></b> 
 
<table class="mystyle"> 
 
    <tr> 
 
    <th>Title 1</th> 
 
    <th>Title 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Content 1</td> 
 
    <td>Content 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Content 3</td> 
 
    <td>Content 4</td> 
 
    </tr> 
 
</table> 
 

 
<hr> 
 

 
<b><i>This table doesn't inherit the styles</i></b> 
 

 
<table> 
 
    <tr> 
 
    <th>Title 1</th> 
 
    <th>Title 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Content 1</td> 
 
    <td>Content 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Content 3</td> 
 
    <td>Content 4</td> 
 
    </tr> 
 
</table>

Answer 2

Каждая таблица должна иметь уникальный класс, а затем могут быть направлены конкретно.

HTML:

<table class="first"> 
    <!--table elements--> 
</table> 
<table class="second"> 
    <!--table elements--> 
</table> 

CSS:

table.first th, table.first td{ 
    /*properties*/ 
} 
table.second th, table.second td{ 
    /*properties*/ 
}