jQuery сортируемый: таблица стилей такая же, как список - PullRequest
Новая
       5

jQuery сортируемый: таблица стилей такая же, как список

0 голосов
/ 10 июня 2011

Сравните эти два фрагмента 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, но я, похоже, не могу использовать магию CSS, которая сделает TR похожим на LI. Какие-нибудь яркие идеи?

edit: jsFiddle волшебным образом заставляет его работать идеально (соответствующие строки css копируются / вставляются прямо из моего источника jquery-ui css, который я использую. Однако, когда я сам создаю точно такую ​​же страницу (даже ограничиваясь только CSS, вставленным в jsFiddle) и загружая его в веб-браузер, он сохраняет то же ошибочное поведение, описанное выше, независимо от того, добавляю ли я тип документа для входа / выхода из режима причуд. 

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

Ответы [ 2 ]

1 голос
/ 10 июня 2011

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, который вы пропустили.

0 голосов
/ 10 июня 2011

Это скорее всего связано с дополнительным форматированием элементов таблицы.Если у вас есть браузер Chrome, проверьте все элементы полностью, возможно, есть некоторые CSS, которые применяются к элементам table, tbody, tr и td.Вам нужно будет убрать часть этого, переопределив некоторые из CSS.

...