How to add header in a row of a table

Using bootstrap v3.0.2.

<table class="table data-table table-bordered no-bottom-margin usage-detail-table">
    <thead>
        <tr>
            <th></th>
            <th>Used</th>
            <th>Deleted</th>
            <th>Total</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <th>{{'update-profile.detail-usage.personal.files' | translate}}</th>
            <td>{{usageDetails.personalDiskUsage | commaSeparatedNumber}} bytes</td>
            <td>{{usageDetails.personalDeletedDiskUsage | commaSeparatedNumber}} bytes</td>
            <td><b>{{usageDetails.totalPersonalUsage | commaSeparatedNumber}} bytes</b></td>
        </tr>
        <tr>
            <th>{{'update-profile.detail-usage.shared.files' | translate}}</th>
            <td>{{usageDetails.sharedDiskUsage | commaSeparatedNumber}} bytes</td>
            <td>{{usageDetails.sharedDeletedDiskUsage | commaSeparatedNumber}} bytes</td>
            <td><b>{{usageDetails.totalDeleted | commaSeparatedNumber}} bytes</b></td>
        </tr>
        <tr>
            <th>Total</th>
            <td><b>{{usageDetails.totalUsed | commaSeparatedNumber}} bytes</b></td>
            <td><b>{{usageDetails.totalDeleted | commaSeparatedNumber}} bytes</b></td>
            <td><b>{{spaceUsed | commaSeparatedNumber}} bytes<br>({{spaceUsed | sizeText}})</br></b></td>
        </tr>
    </tbody>
</table>

Table want to give the first column element the same look as the table header. But <th> tag is not working. How to add row headers here?

These are the additional css class:

.usage-detail-table > tbody > tr > td {
    text-align: right;
    padding-right: 20px;
}

.usage-detail-table > thead > tr > th {
    text-align: right;
    padding-right: 20px;
}