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

Question

Я работаю над страницей вики из Gamepedia.

Он имеет файл верхнего слоя с именем Common.css, с дополнительными стилями, автоматически применяемыми ко всем оболочкам.

table.wikitable2 {
    background-color: transparent;
    color: #FFFFFF;
    border-collapse: collapse;
    box-shadow: 0 0.1em 0.75em #FFFF73;
}

table.wikitable2 > tr > th,
table.wikitable2 > * > tr > th {
    background: #000000;
    color: #FFFFFF;
}

table.wikitable2 > tr > th,
table.wikitable2 > tr > td,
table.wikitable2 > * > tr > th,
table.wikitable2 > * > tr > td {
    color: #FFFFFF;
    border: 1px solid #00FFFF;
}

Тогда на рассматриваемой странице у меня есть мой стол:

{| class="wikitable2" style="text-align:center; background-color: #333333; color: #FFFFFF; border-spacing: 0; padding: 10px 10px 10px 10px!important; cellpadding: 10px!important"
|-
| Name 
| Frequency
|- style="background-color: #00008A; color: #FFFFFF"
| 1
| 2
|}

Проблема в клетках. Ячейки не будут дополнены, независимо от того, что я добавлю, в любой из вышеперечисленных разделов. Моим последним усилием было добавление "! Важно" в атрибуты cellpadding и padding.

Я приехал сюда в качестве последнего средства, я был в IRC Gamepedia и не получил ответа в течение нескольких часов, и за 5 часов я сделал не менее 200 изменений, чтобы попытаться добавить эту смехотворно простую вещь в свой стол. Пожалуйста, кто-нибудь может мне помочь?

РЕДАКТИРОВАТЬ:

https://www.dropbox.com/s/opfgxa8a8bgnt6l/crampedTable.png?dl=0

Answer 1

Вот простой пример добавления cellpadding в таблицу https://jsfiddle.net/12wg9mp1/ Надеюсь, это поможет!

<style>
    table {
        border-collapse: collapse;
    }
    td { 
        padding: 10px; border: 1px solid #000; 
    }
</style>

<table>
    <tr>
        <td class="td">Col 1</td>
        <td class="td">Col 2</td>
        <td class="td">Col 3</td>
    </tr>
</table>

Answer 2

Я решил это с помощью CSS-атрибута "padding: #px;"

Извините за беспокойство всех. ^^;

Answer 3

Глядя на ваш живой пример, вы увидите, что проблема в том, что padding применяется к table (cellpadding не является допустимым свойством css и будет игнорироваться). Чтобы отступы действовали на ячейки, вам нужно внести одно из следующих изменений:

• Добавьте атрибут style="padding: 10px;"к tds
• ИЛИ Добавьте атрибут cellpadding="10px" к table,

Итак, это:

<table class="wikitable2" style="text-align:center; background-color: rgba(51,51,51,0.54); color: #FFFFFF; border-spacing: 0; padding: 10px 10px 10px 10px !important; cellpadding: 10px !important;">
    <tbody>
        <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td>Col 3</td>
        </tr>
        <tr style="background-color: rgba(0,0,117,0.54); color: #FFFFFF">
            <td>Col 1</td>
            <td>Col 2</td>
            <td>Col 3</td>
        </tr>
    </tbody>
</table>

Стало бы это:

<table class="wikitable2" style="text-align:center; background-color: rgba(51,51,51,0.54); color: #FFFFFF; border-spacing: 0;">
    <tbody>
        <tr>
            <td style="padding: 10px;">Col 1</td>
            <td style="padding: 10px;">Col 2</td>
            <td style="padding: 10px;">Col 3</td>
        </tr>
        <tr style="background-color: rgba(0,0,117,0.54); color: #FFFFFF">
            <td style="padding: 10px;">Col 1</td>
            <td style="padding: 10px;">Col 2</td>
            <td style="padding: 10px;">Col 3</td>
        </tr>
    </tbody>
</table>

В идеале это изменение должно быть сделано в таблице стилей, а не в строке, но ваш пример показывает, что вы не можете изменить таблицу стилей в этом случае. Если вы можете изменить таблицу стилей, вы можете добавить это правило, чтобы получить тот же результат:

.wikitable2 td {
    padding: 10px;
}