CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-sortablehtml-table
Dan Burton
Dan Burton

Reputation: 53665

jQuery sortable: style table same as list

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>

Upvotes: 0

Views: 1126

Answers (2)

thirtydot
thirtydot

Reputation: 228182

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.

Upvotes: 1

Kevin Mansel
Kevin Mansel

Reputation: 2371

This is due to extra formatting on table elements most likely. If you have a chrome browser, inspect both elements fully, there is probably some css that is being applied to the table, tbody, tr, and td elements. You will need to strip some of that out by overriding some of the css.

Upvotes: 0

Related Questions