FrAngular : tables1

HTML

<div ng-app ng-controller="Ctrl">
    <table>
        <thead>
            <tr>
                <th>Browser</th>
                <th class="pct">%</th>
            </tr>
        </thead>
        <tbody ng-repeat="browser in browsers">
            <tr class="total">            
                <td class="browser">{{browser.name}}</td>
                <td class="pct">{{browser.total}} %</td>
            </tr>
            <tr ng-repeat="version in browser.versions" class="detail">
                <td class="browser">{{browser.name}} {{version.name}}</td>
                <td class="pct">{{version.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) {
    
    $scope.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},
            ]
        },
    ];
    
    
    
}