Табличка с таблицей стилей, запрещающая работу таблицы

Question

Я пишу веб-страницу, основанную на чужой таблице стилей. Таблица стилей включает в себя следующее:

table { 
    border-collapse: collapse; 
} 

th, td { 
    padding: 0; 
} 

Теперь я хочу создать таблицу с ненулевым заполнением ячейки. Но у меня возникли проблемы с переопределением этой таблицы стилей:

<table cellpadding="10"> 
    <tr> 
    <td padding="10"> 
     Foo 
    </td> 
    ... 
    ... 
    </tr> 
</table> 

и ни одна из указанных работ не работает; заполнение ячейки остается плотным нолем.

Как переопределить таблицу стилей (не используя другую таблицу стилей)?

Answer 1

Вы можете сделать в онлайн-стиль:

<td style="padding: 10px"> 

или назначить класс в table и создать для него правило:

<table class="table"> 
    <tr> 
    <td> 
     Foo 
    </td> 
    </tr> 
</table> 

и CSS для этого:

table td { 
    padding: 10px; 
} 

Answer 2

Вы можете использовать встроенные стили (т.е. стили, объявленные в элементе), встроенные таблицы стилей (т.е. стили, объявленные на одной странице, но не непосредственно по элементам) или внешние таблицы стилей. К сожалению, стили CSS переопределяют атрибуты в большинстве случаев (я считаю, что атрибуты, такие как вы используете здесь, устарели, что означает, в основном, использовать таблицы стилей).

Answer 3

попробуйте более конкретно в вашем селекторе, например

table td { 
    padding:10px; 
} 

выше перекроет

th, td { 
    padding: 0; 
} 

Узнайте больше для CSS Специфичность here.

Answer 4

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

table { 
    border-collapse: collapse; 
} 

th, td { 
    padding: 0; 
} 

table.newStyle { padding:10px; } 


<table class="newStyle"> 
    <tr> 
    <td padding="10"> 
     Foo 
    </td> 
    ... 
    ... 
    </tr> 
</table> 

Answer 5

Просто встраивать необходимые стили:

<table style="border-collapse: separate; border-spacing: 10px;"> 
... 
</table> 

Если вы сделаете это, вы не нуждаетесь в padding="10" на td либо. См. http://jsbin.com/exovat/edit#html для рабочего примера.

Альтернативой встраиванию стилей является доступ к вашей собственной таблице стилей, которая загружается после их таблицы стилей. После этого вы можете установить идентификатор на столе, как <table id="foo">, а затем просто переопределить их стили в пользовательских стилях, как это:

table#foo { 
    border-collapse: separate; 
    border-spacing: 10px; 
} 

[Примечание: Свойство border-spacing CSS не работает с IE7 или ниже; если вам нужны эти браузеры для поддержки, вам лучше использовать какой-то хакерский метод]