How can I force an attribute to a cell?

Question

I'm working on a Wiki page from Gamepedia.

It has an upper layer file called Common.css with extra styles automatically applied to all skins.

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;
}

Then on the page in question I have my table:

{| 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
|}

The problem is the cells. The cells won't pad no matter what I add, to either of the above sections. My last effort was adding '!important' to cellpadding and padding attributes.

I came here as a very last resort, I have been to Gamepedia's IRC and got no answer in several hours and have made at least 200 modifications over 5 hours to try and get this ridiculously simple thing added to my table. Please could anyone help me?

EDIT:

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

Is it possible to see the final generated table? It is probably worth removing `cellpadding` from your `style` as it is not a valid css property. — Hidden Hobbes, Mar 17 '15 at 09:18
I did remove it from css, since it had no effect. I am also aware it can't be applied to rows either. So I've been focused on the table attributes. I'll edit in an image, give me a moment. — Kirbyarm, Mar 17 '15 at 09:24
Apologies, I wasn't clear enough with my request! Would it be possible to see the final generated HTML and CSS code - an example that reproduces the issue and/or a link to a page with the problem? — Hidden Hobbes, Mar 17 '15 at 09:30
`cellpadding` attribute it's `border-spacing` css property http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css — ostapische, Mar 17 '15 at 09:33
@Kirbyarm Did you try setting the attribute `cellpadding="10px"` to the table? — anpsmn, Mar 17 '15 at 09:49
Your issue is that you are applying the `padding` to the `table`, for it to take effect on the cells you will need to apply it to the `td` instead. Alternatively, remove `cellpadding` from your `style` and make it its own attribute `cellpadding="10px"` on the `table`. — Hidden Hobbes, Mar 17 '15 at 09:50
Hmm, actually I'm going to try that out. Thank you. I'll reply with the success of it. — Kirbyarm, Mar 17 '15 at 09:50
|- style="background-color: #00008A; color: #FFFFFF; cellpadding: 3px!important" Didn't work when applying it to the row's style. I refuse to add it to every cell of every table manually. Trying second alternative now. — Kirbyarm, Mar 17 '15 at 10:00
Second alternative works like a charm! Thank you so much! I can now get it working from css and from the wiki table format. Much appreciated for the deep understanding. If you submit one of the solutions I found I will upvote it. — Kirbyarm, Mar 17 '15 at 10:04

score 0 · Answer 1 · answered Mar 17 '15 at 09:25

0

Here's a simple example for adding cellpadding to a table https://jsfiddle.net/12wg9mp1/ I hope it helps!

<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>

answered Mar 17 '15 at 09:25

Teknotica

1,096
6
19

Sorry but I am using Wiki Table format so that stuff confuses me. – Kirbyarm Mar 17 '15 at 09:27

score 0 · Answer 2 · answered Mar 17 '15 at 09:49

0

I solved it by using CSS attribute "padding: #px;"

Sorry for the trouble everyone. ^^;

answered Mar 17 '15 at 09:49

Kirbyarm

29
5

Then select this option as the answer. – Skatox Mar 18 '15 at 13:33

Hidden Hobbes · Answer 3 · 2015-03-17T10:53:36.473

Looking at your live example it would appear that the issue is that the padding is being applied to the table (cellpadding is not a valid css property and will be ignored). For padding to take effect on the cells you will need to make one of the following changes:

Add the attribute style="padding: 10px;"to the tds
OR Add the attribute cellpadding="10px" to the table.

So this:

<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>

Would become this:

<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>

Ideally this change would be done in a stylesheet rather than inline, but your example seems to suggest that you are unable to modify the stylesheet in this instance. If you can modify the stylesheet you could add this rule to get the same result:

.wikitable2 td {
    padding: 10px;
}

How can I force an attribute to a cell?

3 Answers3