CODEWITHSUNDEEP
htmlangularjs
Mercer
Mercer

Reputation: 9986

Use rowspan and colspan

I have a table like this:

enter image description here

I want to add in my cellule two button like this

enter image description here

How can I use rowspan and colspan for this? For reference I have created a Fiddle.

My HTML code:

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

Upvotes: 0

Views: 497

Answers (1)

Kate Mih&#225;likov&#225;
Kate Mih&#225;likov&#225;

Reputation: 2035

Just use buttons in one cell:

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

or use ng-repeat-start + ng-repeat-end and 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>

Upvotes: 1

Related Questions