Question

对比这两段HTML代码：

<ul class="ui-state-default" style="list-style-type: none; margin: 0; padding: 0;">
    <li>
    <table><tr>
        <td>Testing.</td>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr></table>
    </li>
</ul>

将“ui-state-default”应用于列表，如上所述，大致是所需的外观（上面的嵌套表仅用于使结果看起来类似于下面的代码）。但是，当我只用一张桌子尝试相同的时候：

<table>
    <tbody>
        <tr class="ui-state-default">
            <td>Testing.</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
    </tbody>
</table>

我看起来几乎一样，但表格之间的白线条很难看。此外，TR没有LI所具有的漂亮边界。截图：

image of those two code snippets as rendered in IE9 quirks mode, similar in other browsers

我真的想使用jQuery UI的表格版本可排序，但我似乎无法掀起任何会让TR看起来像LI一样漂亮的CSS魔法。有什么好主意吗？

编辑：jsFiddle magically makes it work perfectly（直接从我正在使用的jquery-ui css源中复制/粘贴的相关行。但是，当我自己创建完全相同的页面时（甚至仅限于自己css粘贴在jsFiddle中并将其加载到Web浏览器中，它保留了上述相同的错误行为，无论是否添加doctype进入/退出怪癖模式。

<html>
<head>
<style type="text/css">
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }
</style>
</head>

<body>
<ul class="ui-state-default" style="list-style-type: none; margin: 0; padding: 0;">
    <li>
    <table><tr>
        <td>Testing.</td>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
    </tr></table>
    </li>
</ul>

<br /><br />

<table>
    <tbody>
        <tr class="ui-state-default">
            <td>Testing.</td>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
        </tr>
    </tbody>
</table>

</body>
</html>

Answer 1

jsFiddle神奇地让它发挥作用完美

那是因为jsFiddle加载normalize.css，其中包含：

table {
    border-collapse:collapse;
    border-spacing:0;
}

如果你取消“Normalized CSS”，它会在jsFiddle中再次被破坏：http://jsfiddle.net/S3ugZ/1/

如果你只添加那段CSS，它可以运作：http://jsfiddle.net/S3ugZ/2/

所以，有你缺少的CSS。

Answer 2

这是由于最有可能在表格元素上进行额外格式化。如果您有一个chrome浏览器，请完全检查这两个元素，可能会有一些css应用于table，tbody，tr和td元素。你需要通过覆盖一些css来消除其中的一部分。

jQuery sortable：样式表与list相同

2 个答案: