Question

我希望每个表格行都是可点击的，这样它就像手风琴一样展开，但是当手风琴激活时，它不会占据整行的长度。如何让它占据整行？代码如下。

<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

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

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

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

Answer 2

问题是桌子和手风琴都使用＆＃34; active＆＃34;类。手风琴也会显示：阻止＆＃34;默认情况下。

因此，快速解决方案（但由于可扩展性原因而不正确）将是......

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

IGNITE_HOME

然后转到accordion.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;
}

最后将html代码更改为

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

表内的语义ui手风琴

2 个答案: