html - 如何将属性强制到单元格？

Question

我正在处理来自 Gamepedia 的 Wiki 页面。

它有一个名为 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 属性中添加 '!important'。

我是作为最后的手段来到这里的，我去过 Gamepedia 的 IRC 并在几个小时内没有得到任何答复，并且在 5 小时内进行了至少 200 次修改，试图将这个简单得可笑的东西添加到我的桌子上。请问有人可以帮我吗？

编辑：

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

Answer 1

查看您的实时示例，问题似乎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;
}

Answer 2

这是一个向表格添加单元格填充的简单示例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 3

我通过使用 CSS 属性“填充：#px;”解决了它

给大家添麻烦了。^^;