JQuery Accordion неправильная ширина

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

На самом деле вы добавили свойство 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 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>