css - 语义 UI 嵌套表格显示在父级的单个单元格中

Question

我正在尝试创建(使用 Semantic-UI 和 knockoutjs)一个数据表，其中每一行都有一个可扩展项( Accordion )以显示与扩展行相关的数据子表。

我试过使用 colspan="4"在我的子表的 <td> 上元素，无济于事。无论我尝试什么，子表似乎只存在于父表的第一列中。我敢肯定，下面的 jsfiddle 比我的描述更能说明问题。

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

这可能是一个简单的 CSS 问题——我不是专家——但我尝试过的任何一个都不适合我。我还尝试将子表包装为 <div> , 但这似乎阻止了 Accordion 的崩溃。

Answer 1

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