FrAngular : tables3

HTML

<div ng-app ng-controller="Ctrl">
    <table>
        <thead>
            <tr>
                <th>Browser</th>
                <th class="pct">%</th>
            </tr>
        </thead>
        <tbody ng-repeat="line in lines" ng-switch="line.type">
            <tr ng-switch-when="total" class="total">
                <td class="browser">{{line.name}}</td>
                <td class="pct">{{line.value}} %</td>
            </tr>
            <tr ng-switch-when="detail" class="detail">
                <td class="browser">{{line.name}}</td>
                <td class="pct">{{line.value}} %</td>
            </tr>
        <tbody>
    </table>
</div>

CSS

table {
  font-size: 0.9em;
  margin: 1em;
}
th,td {
  padding: 0.3em;
}
th {
  background-color: #CCDDFF;
}
tr.total td {
  background-color: #EEEEFF;
}
td.pct,th.pct {
  text-align: right;
}
tr.detail td {
  font-size: 0.7em;
}

JavaScript

function Ctrl($scope) {
    
    var browsers = [
        { 
            name: 'Chrome',
            total: 68.83,
            versions: [
                {name: '23.0.1271.97', value: 46.68},
                {name: '18.0.1025.166', value: 10.97},
                {name: '23.0.1271.101', value: 10.66},
            ]
        },
        { 
            name: 'Firefox',
            total: 17.87,
            versions: [
                {name: '17.0', value: 70.24},
                {name: '16.0', value: 12.50},
            ]
        },
        { 
            name: 'Safari',
            total: 4.36,
            versions: [
                {name: '536.26.17', value: 36.59},
                {name: '8536.25', value: 36.59},
                {name: '7534.48.3', value: 19.51},
            ]
        },
    ];
    
    var lines = [];
    angular.forEach(browsers, function(browser, keyBrowser) {
        lines.push({type: 'total', name: browser.name, value: browser.total});
        angular.forEach(browser.versions, function(version, keyVersion) {
            lines.push({type: 'detail', name: browser.name + ' ' + version.name, value: version.value});
        });
    });
    
    $scope.lines = lines;
}