JQuery手風琴寬度錯誤

Question

我需要使用帶有JQuery UI Accordion的表格。 標題和內容都應該是具有固定寬度的3列的表格。 由於一些奇怪的原因，內容的第一列使用忽略css的所有空間，儘管標題看起來不錯。 這裏是我的jsfiddle： http://jsfiddle.net/qm12h9tL/

這裏是代碼：

<script> 
$(document).ready(function() { 
    $('#topics').accordion({ 
     collapsible:true, 
     header:'.topic', 
     content:'.lessons' 
    }); 
}); 
</script> 
<style> 
body { 
    width: 400px; 
    max-width: 400px; 
    min-width: 400px; 
} 

.accordion-container { 
    width:100%; 
} 

.topic, .lessons { 
    width: 400px; 
} 

.name { 
    width: 70%; 
} 

.cards { 
    width:15%; 
} 

.percentage { 
    width: 15%; 
} 
</style> 
<div class="accordion-container"> 
    <table id="topics"> 
     <tbody class="topic" style="display:table;" id="t1"> 
      <tr> 
       <td class="name">Topic 1</td> 
       <td class="cards">10 cards</td> 
       <td class="percentage">100%</td> 
      </tr> 
     </tbody> 
     <tbody class="lessons"> 
      <tr> 
       <td class="name">Lesson 1</td> 
       <td class="cards">10 cards</td> 
       <td class="percentage">100%</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

EDIT1我試着編寫HTML代碼是這樣的：

<table id="topics"> 
     <tr class="topic"> 
      <td class="name">Topic 1</td> 
      <td class="cards">10 cards</td> 
      <td class="percentage">100%</td> 
     </tr> 
     <tr class='lessons'> 
      <td class="name">Lesson 1</td> 
      <td class="cards">10 cards</td> 
      <td class="percentage">100%</td> 
     </tr> 
</table> 

也不起作用。

編輯2我從來沒有想過，增加更多的課程到一個主題將是一個問題！ http://jsfiddle.net/qm12h9tL/11/

<table id="topics"> 
    <tbody id="t1"> 
     <tr style="display: table-row;" class="topic"> 
      <td class="name">Topic 1</td> 
      <td class="cards">10 cards</td> 
      <td class="percentage">100%</td> 
     </tr> 
     <tr class="lesson"> 
      <td class="name">Lesson 1</td> 
      <td class="cards">10 cards</td> 
      <td class="percentage">100%</td> 
     </tr> 
     <tr class="lesson"> 
      <td class="name">Lesson 1</td> 
      <td class="cards">10 cards</td> 
      <td class="percentage">100%</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

顯示器：表樣式屬性被搞砸了佈局（你的第一個TBODY標籤）。也許這是一些複製/粘貼操作的剩餘部分？

Answer 2

實際上，您爲您的標題（<tbody>）元素添加了display: table屬性。這擰了佈局的一部分。當你刪除它時，jQuery UI會扭轉你的佈局。它將display: block添加到變成塊的<tr>元素。我建議您將display: table-row設置爲您的<tr>元素。

您現在正面臨另一個問題，因爲jQuery會在您的<tr>中添加一個帶有圖標的跨度，該圖標呈現爲額外的單元格。添加此CSS：

table span 
{ 
    display: none !important; 
} 

而且會解決它。

更新小提琴：http://jsfiddle.net/qm12h9tL/8/

---

更新：固定collapsible: true

Answer 3

一個黑客已經取得的解決方案

.ui-accordion .ui-accordion-header{ 
    display: table-caption !important; 
} 

請注意display: table-caption;不會在IE7和更早版本支持。 IE8需要！DOCTYPE。 IE9支持這些值。

$(document).ready(function() { \t 
 
\t $('#topics').accordion({ 
 
\t \t collapsible:true, 
 
\t \t header:'.topic', 
 
\t \t content:'.lessons' 
 
\t }); 
 
});

.accordion-container { 
 
    width: 100%; 
 
    background-color: #ff0; 
 
} 
 
#topics{ 
 
    width: 400px; 
 
} 
 
.name { 
 
    width: 70%; 
 
} 
 
.cards { 
 
    width: 15%; 
 
} 
 
.percentage { 
 
    width: 15%; 
 
} 
 
.ui-accordion .ui-accordion-header{ 
 
    display: table-caption !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/south-street/jquery-ui.css" rel="stylesheet" /> 
 
<div class="accordion-container"> 
 
    <table id="topics"> 
 
    <tbody class="topic" id="t1"> 
 
     <tr> 
 
     <th class="name">Topic 1</th> 
 
     <th class="cards">10 cards</th> 
 
     <th class="percentage">100%</th> 
 
     </tr> 
 
    </tbody> 
 
    <tbody class="lessons"> 
 
     <tr> 
 
     <td class="name">Lesson 1</td> 
 
     <td class="cards">10 cards</td> 
 
     <td class="percentage">100%</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>