Вложенная таблица семантического пользовательского интерфейса отображается в одной ячейке родительского элемента. - PullRequest
Новая
       7

Вложенная таблица семантического пользовательского интерфейса отображается в одной ячейке родительского элемента.

0 голосов
/ 27 октября 2018

Я пытаюсь создать (используя Semantic-UI и knockoutjs) таблицу данных, в которой каждая строка имеет расширяемый элемент (аккордеон) для отображения вложенной таблицы данных, связанных с расширенной строкой.

Я пытался использовать colspan="4" на элементе <td> в моей под-таблице, но безрезультатно. Независимо от того, что я пытаюсь, кажется, что подтаблица существует только в первом столбце родительской таблицы. Я уверен, что jsfiddle ниже демонстрирует проблему лучше, чем мое описание.

https://jsfiddle.net/xpvt214o/908333/

Это может быть простая проблема CSS - я не эксперт - но все, что я пробовал, работает для меня. Я также попытался обернуть вспомогательный стол как <div>, но это, казалось, сломало аккордеон от разрушения.

1 Ответ

0 голосов
/ 30 октября 2018 

<table class="ui celled table accordion">
      <thead><tr>
       <th ></th>
    <th >ID</th>
    <th>Name</th>
    <th >FK1 ID</th>
    <th >FK2 ID</th>
    </tr></thead>
  <tbody data-bind="foreach: arrayVM">
    <tr class="ui title">
      <td><i class="dropdown icon"></i></td>
      <td data-bind="text: id"></td>
      <td data-bind="text: name"></td>
      <td data-bind="text: fk1id"></td>
      <td data-bind="text: fk2id"></td>
    </tr>
    <tr style="display:none">
      <td colspan="5" class="ui content">
        <table class="ui inverted celled table" style="width:700px">
        <tbody>
        <tr>
            <td><i class="ui logo add icon"></i></td>
            <td data-bind="text: id"></td>
            <td>column2</td>
            <td>column3</td>
            <td>column4</td>
          </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
...