Как иметь различные таблицы стилей в CSS

Question

У меня есть разные таблицы в моих страницах, которые должны иметь разные границы, CELLPADDING и т.д. Я могу создать много классов, как,

.pad5 td {padding:5px} 

, а затем, используя,

<table class="pad5"> 

Но если я использую 'table', это css, стиль применяется ко всем таблицам. Как я могу достичь результата?

Answer 1

объявить классы для каждого типа укладки вы хотите создать, и назначить <table> в HTML с помощью атрибута class

CSS

.table1 { 
    ... 
} 

.table2 { 
    ... 
} 

HTML

<table class="table1"> 
    ... 
</table> 

<table class="table2"> 
    ... 
</table> 

Answer 2

дать каждому из них отдельные идентификаторы. классы для CSS, которые будут применяться к связке различных объектов, идентификаторы для CSS, которые будут применяться к конкретным объектам

<table id="first_table"></table> 

Answer 3

Вы можете дать вашим таблицам имена классов также

Пример HTML:

<table class="mytable"> 
    <tr> 
     <td>My cell</td> 
    </tr> 
</table> 

<table class="anothertable"> 
    <tr> 
     <td>My cell</td> 
    </tr> 
</table> 

Пример CSS:

.mytable { 
    border: 1px solid black; 
} 

.anothertable { 
    border: 1px solid red; 
} 

Первая таблица будет иметь сплошную черную границу 1px, а вторая таблица будет иметь сплошную красную границу 1px.

Answer 4

Вы можете попытаться добавить идентификатор каждой таблицы и в CSS сделать ссылку с таким идентификатором, как:

CSS & HTML:

#table1 tr td { 
 
    padding: 5px; 
 
    border: 4px solid #888; 
 
} 
 

 
#table2 tr td { 
 
    padding: 5px; 
 
    border: 4px solid red; 
 
}

<table id="table1"> 
 
    <tr> 
 
    <td>first content</td> 
 
    <td>second content</td> 
 
</tr> 
 
</table> 
 

 
<table id="table2"> 
 
    <tr> 
 
    <td>first content</td> 
 
    <td>second content</td> 
 
</tr> 
 
</table>

Answer 5

Я обнаружил, что если я не используйте таблицу вообще в CSS, она работает. e.g.- .cell {border-spacing: 10px}