jQuery的排序：樣式表相同列表

對比度HTML的這兩個片段：jQuery的排序：樣式表相同列表

<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-狀態默認」到一個列表，如上述，是大致所需的外觀上述（嵌套表僅用於使結果看起來類似於下面的代碼）。然而，當我嘗試用相同的只是一個表：

<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好看像李。任何明智的想法？

編輯：CSS的複製/ jsFiddle magically makes it work perfectly（相關線路直接從我的jQuery的UI CSS源粘貼，我使用但是，當我創建完全相同的網頁我自己（甚至限制自己只。在的jsfiddle粘貼CSS）並將其加載到web瀏覽器，它保留與上述相同的錯誤的行爲，不論是否我添加一個DOCTYPE進入/退出怪異模式。

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

來源

2011-06-09 Dan Burton

我會看看如果你做一個[jsFiddle測試用例]（http://jsfiddle.net/）。這樣，我可以快速嘗試想法。 – thirtydot 2011-06-09 22:40:43

的jsfiddle神奇使得它的工作完美

這是因爲的jsfiddle載荷normalize.css，其中包括，除其他事項外：

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

如果不勾選「歸CSS」，它的分解再次在jsFiddle：http://jsfiddle.net/S3ugZ/1/

如果你加回來只是噸它的工作原理如下：http://jsfiddle.net/S3ugZ/2/

所以，有你錯過的CSS。

來源

2011-06-09 23:53:54 thirtydot

這是由於額外的格式最有可能的表格元素如果你有一個chrome瀏覽器，完全檢查這兩個元素，可能有一些css被應用到表格中，tbody ，tr和td元素。你將需要通過重寫一些CSS來去掉一些。

來源

2011-06-09 22:26:27

jQuery的排序：樣式表相同列表

回答

相關問題