jQuery sortable：样式表与列表相同

如何解决jQuery sortable：样式表与列表相同

| 对比以下两个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那样具有很好的边界。屏幕截图：我真的很想使用可排序的jQuery UI表格版本，但是我似乎无法激起任何CSS魔术来使TR看起来像LI。有什么好主意吗？编辑：jsFiddle神奇地使其完美工作（相关的css行直接从我正在使用的jquery-ui css源中复制/粘贴。但是，当我自己创建完全相同的页面时（甚至将自己限制为仅css粘贴到jsFiddle中）并将其加载到网络浏览器中，无论我是否添加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>

解决方法

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。 , 这是由于很有可能对表格元素进行了额外的格式化。如果您使用的是chrome浏览器，请完全检查这两个元素，表，tbody，tr和td元素可能会应用某些CSS。您将需要通过覆盖某些CSS来去除其中的一些。

jQuery sortable：样式表与列表相同

如何解决jQuery sortable：样式表与列表相同

解决方法

相关推荐