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>