Sample special solution with JSON data

<link rel="stylesheet" type="text/css" href="<%=scriptHelper.mapToUri(scriptHelper.getPath()) %>/SpinOffs.css" />
<div><b><ethz:label value="intro" /></b></div>
<!-- removed "full-width spacing-top" -->
<div class="table-matrix">
    <div class="scrollarea">
      <div class="scrollarea-main">
        <div class="scrollarea-scroll-window">
          <div class="scrollarea-content">
            <table id="spinOffTable" class="spinoff expandableTable tablesorter">
                <colgroup>                
                    <col class="col1">
                    <col class="col2">
                    <col class="col3">
                    <col class="col4">
                </colgroup>
                <thead>
                    <tr class="last-child">
                        <th><ethz:label value="name" /></th>
                        <th><ethz:label value="field" /></th>
                        <th><ethz:label value="year" /></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="spinOffTableBody">
<ethz:iter var="row" root="data">
                    <tr class="trSubtext">
                        <td><%=row.get("attributes.name") %></td>
                        <td><%=JSON.parse(row.get("attributes.areas")).join(" / ") %></td>
                        <td><%=row.get("attributes.year") %></td>
                        <td class="right-align detail"><a href="#" class="toggle eth-link" title="more"><ethz:label value="details" /><span class="material-icons">add</span></a></td></tr>
                    </tr>
                    <tr class="tablesorter-childRow">
                        <td colspan="4" style="display: none;">
<%
var url = row.get("attributes.url");
if (!"".equals(url) &amp;&amp; url.substr(7)) {
%>
                            <a class="eth-link" href='<%=url %>' title='<%=row.get("attributes.name") %>' target="_blank">
                                <%=url %><span aria-hidden="true" class="material-icons">call_made</span>
                            </a>
<%
}
%>                            
                        </td>
                    </tr>
</ethz:iter>
                </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
</div>

<script type="text/javascript">
    // table sorter (jQuery)
    $('#spinOffTable').tablesorter({
        cssChildRow: "tablesorter-childRow",
        headers: {
            3: {sorter: false}
        }
    });    
    $('#spinOffTable').delegate('.toggle', 'click', function() {
        if ($(this).find("span:contains(add)").length > 0) {
            $(this).html("<ethz:label value="hide" /><span class='material-icons'>remove</span>");
        } else {
            $(this).html("<ethz:label value="details" /><span class='material-icons'>add</span>");
        }  
        $(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();
        return false;
    });
</script>

fieldset.spin-off {
    background-color: #ffffff;
    border: medium none;
    padding: 0;
}
fieldset.spin-off div.grouping-box {
    display: inline-block;
}
fieldset.spin-off div.filter-type div.box.full {
    padding: 0;
    width: 10rem;
}
fieldset.spin-off div.filter-value div.box.full {
    padding: 0;
    width: 20rem;
}
.comment-form.spin-off div.grouping-box {
    width: inherit;
}
.table-matrix .scrollarea table.spinoff colgroup col.col1 {
    width: 220px;
}
.table-matrix .scrollarea table.spinoff colgroup col.col2 {
    width: 217px;
}
.table-matrix .scrollarea table.spinoff colgroup col.col3 {
    width: 123px;
}
.table-matrix .scrollarea table.spinoff colgroup col.col4 {
    width: 83px;
}
@media screen and (max-width: 1024px) {    
    .table-matrix .scrollarea table.spinoff thead th:nth-child(1) {
        width: 220px;
    }
    .table-matrix .scrollarea table.spinoff thead th:nth-child(2) {
        width: 217px;
    }
    .table-matrix .scrollarea table.spinoff thead th:nth-child(3) {
        width: 123px;
    }
    .table-matrix .scrollarea table.spinoff thead th:nth-child(4) {
        width: 83px;
    }
}