表內的語義ui手風琴

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作爲標題和內容。 Ë：

<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

問題是，表和手風琴都使用「活動」類。手風琴默認也會顯示「block：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>