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

这是一个将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;"添加到td s
或将属性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;
}

如何强制属性到单元格？

3 个答案: