jQuery 可排序：样式表与列表相同

发布于 2024-11-14 19:05:53 字数 2552 浏览 3 评论 0原文

对比这两个 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 那样漂亮的边框。屏幕截图：

在 IE9 怪异模式下呈现的这两个代码片段的图像，在其他浏览器中类似

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

编辑： jsFiddle 神奇地使其完美工作（相关的 css 行直接从我的 jquery-ui 复制/粘贴但是，当我自己创建完全相同的页面（甚至将自己限制为仅粘贴在 jsFiddle 中的 css）并将其加载到网络浏览器中时，它保留了相同的内容。无论我是否添加文档类型来进入/退出怪异模式，都会出现上述错误行为。

<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>

原文

Contrast these two snippets of 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>

Applying "ui-state-default" to a list, as in above, is roughly the desired appearance (nested table above is only used to make the result look similar to code below). However, when I try the same with just a table:

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

I get nearly the same look, but the table has ugly white lines between the elements. Also, the TR doesn't have the nice border that the LI does. Screenshot:

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

I really want to use the table version of jQuery UI sortable, but I can't seem to whip up any CSS magic that will make the TR look nice like the LI. Any bright ideas?

edit: jsFiddle magically makes it work perfectly (relevant lines of css copy/pasted directly from my the jquery-ui css source that I'm using. However, when I create the exact same page myself (even limiting myself to only the css pasted in the jsFiddle) and load it into a web browser, it retains the same erroneous behavior described above, whether or not I add a doctype to enter/exit quirks mode.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感性不性感 2024-11-21 19:05:53

jsFiddle 神奇地让它工作
完美

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

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

如果您取消选中“标准化 CSS”，它会在 jsFiddle 中再次损坏： http://jsfiddle.net/S3ugZ/1/

如果你只添加回 CSS 片段，它就可以工作： http://jsfiddle.net/S3ugZ/2/

所以，这就是您缺少的 CSS。

jsFiddle magically makes it work
perfectly

That's because jsFiddle loads in normalize.css, which contains, amongst other things:

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

If you untick "Normalized CSS", it's broken again in jsFiddle: http://jsfiddle.net/S3ugZ/1/

And if you add back just that snippet of CSS, it works: http://jsfiddle.net/S3ugZ/2/

So, there's the CSS you were missing.

回复收藏 0 原文

放我走吧 2024-11-21 19:05:53

这很可能是由于表格元素的额外格式造成的。如果您有 Chrome 浏览器，请完全检查这两个元素，可能有一些 css 应用于 table、tbody、tr 和 td 元素。您需要通过覆盖一些 css 来删除其中的一些内容。

回复收藏 0 原文

~没有更多了~

关于作者

若言繁花未落

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

jQuery 可排序：样式表与列表相同

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

佚名

羁客

天天爱笑的徐老师

星

夏日落

隐诗

友情链接

jQuery 可排序：样式表与列表相同

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

佚名

羁客

天天爱笑的徐老师

星

夏日落

隐诗

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。