如何在表的行中添加标头

时间:2015-06-28 07:31:39

标签: html css twitter-bootstrap

使用 bootstrap v3.0.2

以下是我的html,表的css代码

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

表希望为第一列元素提供与表头相同的外观。但是<th>标记不起作用。如何在这里添加行标题?

1 个答案:

答案 0 :(得分:3)

https://jsfiddle.net/0x6gogv6/

似乎按照您的需要工作。

唯一的小连接是:

<thead>
    <tr>
        <th></th>
        <th>Used</th>
        <th>Deleted</th>
        <th>Total</th>
   </tr> <!-- This was tr in you code -->
</thead>