使用rowspan和colspan

Question

我有一张这样的表：

我想在我的cellule中添加两个按钮

我如何使用rowspan和colspan？作为参考，我创建了a Fiddle。

我的HTML代码：

<table ng-controller="PropertiesCompareCtrl" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
    <thead>
    <tr class="warning">
        <th>Key</th>
        <th>Valeur version {{application.version}}</th>
        <th></th>
        <th>Valeur version {{applicationCible.version}}</th>
    </tr>
    </thead>

    <tbody ng-repeat="group in properties.groups">
    <tr>
        <td class="danger" colspan="4" ng-click="hideGroup = !hideGroup">
            <a href="" ng-click="group.$hideRows = !group.$hideRows">
                <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
                <strong>{{group.name}}</strong>
            </a>
        </td>
    </tr>
    <tr ng-repeat="member in group.members" ng-hide="hideGroup">
        <td>{{ member.name }}</td>
        <td>{{ member.valueRef }}</td>
        <td >

        </td>
        <td>{{ member.valueCible }}</td>
    </tr>
    </tbody>
</table>

Answer 1

只需在一个单元格中使用按钮：

<td>
    <button></button><br>
    <button></button>
</td>

或使用ng-repeat-start + ng-repeat-end和rowspan="2"：

<tr ng-repeat-start="member in group.members" ng-hide="hideGroup">
    <td rowspan="2">{{ member.name }}</td>
    <td rowspan="2">{{ member.valueRef }}</td>
    <td>
        <button></button>
    </td>
    <td rowspan="2">{{ member.valueCible }}</td>
</tr>
<tr ng-repeat-end ng-hide="hideGroup">
    <td>
        <button></button>
    </td>
</tr>