CODEWITHSUNDEEP
htmlcsspaddingcellpadding
Kirbyarm
Kirbyarm

Reputation: 29

How can I force an attribute to a cell?

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

Upvotes: 0

Views: 340

Answers (3)

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

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

Upvotes: 0

Kirbyarm
Kirbyarm

Reputation: 29

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

Sorry for the trouble everyone. ^^;

Upvotes: 0

Teknotica
Teknotica

Reputation: 1136

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>

Upvotes: 0

Related Questions