语义 UI 嵌套 table 出现在父单元格中

Question

我正在尝试创建（使用 Semantic-UI 和 knockoutjs）数据 table 其中每一行都有一个可扩展项（手风琴）以显示子 table与扩展行相关的数据。

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

这可能是一个简单的 CSS 问题——我不是专家——但我尝试过的任何方法都不适合我。我还尝试将 sub-table 包装为 <div>，但这似乎阻止了手风琴的折叠。

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>

语义 UI 嵌套 table 出现在父单元格中

Semantic UI nested table shows up in single cell of parent

css

semantic-ui