语义 ui 内的手风琴 table

Question

我希望每个 table 行都可以单击，以便像手风琴一样展开，但是当手风琴激活时，它不会占用整行的长度。我怎样才能让它占据整行？代码如下。

<table class="ui selectable accordion fixed single line celled table">
  <thead>
    <tr>
      <th class="one wide id-row">ID</th>
      <th class="fifteen wide name-row">Name</th>
    </tr>
  </thead>
  <tbody>
    {{#each data}}
      <tr class="appRow title">
        <td class="id-row">{{_id}}</td>
        <td class="name-row">{{name}}</td>
      </tr>
        <div class="content">
          <tr>
            <td colspan="2">{{> form}}</td>
          </tr>
        </div>
    {{/each}}
  </tbody>

Answer 1

问题是 table 和手风琴都使用 "active" class。默认情况下，手风琴也会 "display: block"。

所以一个快速的解决方案（但由于可扩展性原因不正确）是...

转到 table.import.less 并更改对整个部分的注释

.ui.table tr.active,
.ui.table td.active {
  box-shadow: @activeBoxShadow;
}
.ui.table tr.active,
.ui.table td.active {
  background: @activeBackgroundColor !important;
  color: @activeColor !important;
}

然后转到accordion.import.less并将活动状态更改为

.ui.accordion .active.content,
.ui.accordion .accordion .active.content {
  display: table-row;
}

最后将 html 代码更改为

<tr class="content">
   <td colspan="6">{{> form}}</td>
</tr>

Answer 2

我能够通过覆盖 css 来解决问题。因为我想在手风琴的细节部分有多行，所以我使用单独的 tbody 作为标题和内容，i。即：

<table class="ui table accordion">
  <tbody class="ui title">
    <tr><td.../></tr>
  </tbody>
  <tbody class="ui content">
    <tr><td.../></tr>
    <tr.../>
    <tr><td.../></tr>
  </tbody>
</table>

然后我的 css 文件添加了以下内容：

.ui.accordion tbody.ui.content.active {
  display: table-row-group;
}

然后是一些填充和边框覆盖。

语义 ui 内的手风琴 table

Semantic ui accordion inside table

jquery

meteor

semantic-ui

meteor-blaze