在WordPress帖子中设置表格样式时遇到问题

时间:2011-02-22 作者:Synetech

我试图在Wordpress帖子中设计一个表格,但很难让它正常工作。我已经将帖子设置为HTML编辑模式,可以获得一些样式,但不是全部。(老实说,这不是我第一次在使用表格样式方面遇到麻烦。)这篇文章的内容(使用精心设计的样式和高对比度的颜色,以便于识别元素)如下所示。

这是我得到的错误结果:

alt text

正如您所看到的,单元格没有选择样式,但表本身主要是这样。

我想可能是博客的主题造成了干扰,但从我对HTML的理解来看STYLE 表前面的标记应该覆盖它前面的任何内容(部分是这样做的)。如果我直接在TD 标签,这是可行的,但这显然不是一个切实可行的解决方案。

有人能帮我找出如何在Wordpress帖子中使用表格样式吗?非常感谢。

<小时/>

<!-- script type="text/javascript" src="/Common/JS/SortTable.js"></script -->

<style type="text/css">
table.sortable {
    margin              : auto;

    border-style        : dashed;
    border-color        : #000000;
    border-width        : 2px;

    color               : #000000;
    background-color    : #ff0000;
}

table.sortable td {
    border-style        : dashed;
    border-color        : #000000;
    border-width        : 2px;

    width               : 100px;
    background-color    : #0000ff;
}

table.sortable .title {
    width               : 300px;
    background-color    : #00ff00;
}
</style>

<table id="mylist" class="sortable">
    <thead>
        <tr>
            <th>Title</th>
            <th>Foo</th>
            <th>Bar</th>
            <th>Baz</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="title">Something</td>
            <td sorttable_customkey="5"></td>
            <td sorttable_customkey="5"></td>
            <td sorttable_customkey="5"></td>
        </tr>
        <tr>
            <td class="title">Something Better</td>
            <td sorttable_customkey="4"></td>
            <td sorttable_customkey="5"></td>
            <td sorttable_customkey="5"></td>
        </tr>
        <tr>
            <td class="title">Something Worse</td>
            <td sorttable_customkey="3"></td>
            <td sorttable_customkey="4"></td>
            <td sorttable_customkey="3"></td>
        </tr>
        <tr>
            <td class="title">Something Horrible</td>
            <td sorttable_customkey="3"></td>
            <td sorttable_customkey="4"></td>
            <td sorttable_customkey="1"></td>
        </tr>
    </tbody>
</table>

2 个回复
最合适的回答,由SO网友:Synetech 整理而成

好了,问题解决了。事实证明,问题是由于WordPress的“auto-p”功能,直到/如果可以更新以识别和忽略其中的文本STYLESCRIPT 块,一个简单的解决方法是使用WP Unformatted 插件,可轻松切换每篇文章的auto-p功能<人力资源/>Update2该死!我尝试将样式和脚本代码包装在CDATA标记中,但没有成功;WordPress仍将空白分隔块包装在P 标签。我想我必须提交一份报告<人力资源/>Update我刚刚意识到问题在于Wordpress会自动包装代码块,并在P 标签。如果空行在SCRIPTSTYLE 阻止<我想出来了。我在列表的顶部添加了一个额外的样式(用于IMG标记),这花了我很多时间,但是主表样式(唯一有效的)突然停止了工作。

然后我在STYLE tag和新的IMG样式也停止了工作(换句话说,没有任何样式被采用)。凭直觉,我删除了空行,并在IMG的样式之后添加了样式的结束标记。然后,我将每组样式包装在各自的开头和结尾中STYLE 标签和瞧!成功了!(另一种选择是删除选择器之间的空行,从而将所有内容塞满。)

这似乎是WordPress解析帖子时的一个bug。事实上,我昨晚在JavaScript中遇到了同样的错误:我试图注释掉一段代码,但发现如果在它和之前的活动代码之间有一条空行,整个过程都失败了;我要么删除空行,要么删除整个注释块。

这些变通方法暂时可行,但很难做到优雅。在这个问题上搜索一下,什么也找不到,所以我要检查一下抄本,很可能最终会在Wordpress网站上发布一个bug报告。

与此同时,我得把这张花哨的桌子弄得好看点…:-)
谢谢大家的努力。

SO网友:wyrfel

你的理解部分正确。如果后期样式与选择器具有相同或更少的特异性,则会覆盖早期样式。特定性可能是一件棘手的/违反直觉的事情,但最基本的是:以更窄(特定)的方式指定元素的选择器会覆盖以更宽的方式定义元素的选择器。

这完全取决于主题的样式表的功能。你需要对此进行调查。例如,在我的主题上,帖子中的表格通过

#content tr th { ... }
以及

#content tr td { ... }
在您的情况下,这些将优先于您的定义,因为#content选择了比table更外层的标记。可排序。这定义了更高的特异性,因为它缩小了\'的上下文。将选择的“可排序”表。在这种情况下,您必须使用

#content table.sortable tr th { ... }
以及

#content table.sortable tr td { ... }
为了让他们优先。

让您自己的样式优先的一种简单方法是始终在选择器前面加上前缀body. 然而,这相当粗糙,因此可能会导致麻烦。

我建议使用Firebug或WebKit/Chrome的buildin开发工具等浏览器web开发工具来检查问题中的元素,并查看哪些样式定义会相互覆盖。这将给你一个很好的线索,你可以做什么让你自己的优先。

一旦你明白了这一点,就在你的主题/子主题的风格中加入你自己的风格。css。。。如果要格式化该表,请仅使用id选择器(#mytable) 或者如果不止一个,给他们一个不同的类,并将其放入选择器中。

结束