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>

<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

实际上，您在标题（display: table）元素中添加了<tbody>属性。这搞砸了布局的一部分。当你删除它时，它的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 2

您的显示：表格样式属性正在搞乱布局（在您的第一个tbody标签上）。也许它是一些复制/粘贴动作的残余？

Answer 3

已经将hack作为解决方案

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

请注意IE7及更早版本不支持 display: table-caption;。 IE8需要一个！DOCTYPE。 IE9支持这些值。

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

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

JQuery Accordion错误的宽度

3 个答案: