title: jQuery sortable: style table same as list
body: <p>Contrast these two snippets of HTML:</p>
  
  <pre><code>&lt;ul class="ui-state-default" style="list-style-type: none; margin: 0; padding: 0;"&gt;
      &lt;li&gt;
      &lt;table&gt;&lt;tr&gt;
          &lt;td&gt;Testing.&lt;/td&gt;
          &lt;td&gt;One&lt;/td&gt;
          &lt;td&gt;Two&lt;/td&gt;
          &lt;td&gt;Three&lt;/td&gt;
      &lt;/tr&gt;&lt;/table&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody&gt;
          &lt;tr class="ui-state-default"&gt;
              &lt;td&gt;Testing.&lt;/td&gt;
              &lt;td&gt;One&lt;/td&gt;
              &lt;td&gt;Two&lt;/td&gt;
              &lt;td&gt;Three&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/jnyk2.png" alt="image of those two code snippets as rendered in IE9 quirks mode, similar in other browsers"></p>
  
  <p>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?</p>
  
  <hr>
  
  <p>edit: <a href="http://jsfiddle.net/S3ugZ/" rel="nofollow noreferrer">jsFiddle magically makes it work perfectly</a> (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.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  .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}*/; }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;ul class="ui-state-default" style="list-style-type: none; margin: 0; padding: 0;"&gt;
      &lt;li&gt;
      &lt;table&gt;&lt;tr&gt;
          &lt;td&gt;Testing.&lt;/td&gt;
          &lt;td&gt;One&lt;/td&gt;
          &lt;td&gt;Two&lt;/td&gt;
          &lt;td&gt;Three&lt;/td&gt;
      &lt;/tr&gt;&lt;/table&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;br /&gt;&lt;br /&gt;
  
  &lt;table&gt;
      &lt;tbody&gt;
          &lt;tr class="ui-state-default"&gt;
              &lt;td&gt;Testing.&lt;/td&gt;
              &lt;td&gt;One&lt;/td&gt;
              &lt;td&gt;Two&lt;/td&gt;
              &lt;td&gt;Three&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>