Home/ Questions/Q 6013277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T02:31:31+00:00

Contrast these two snippets of HTML: <ul class=ui-state-default style=list-style-type: none; margin: 0; padding: 0;>

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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