将标题添加到同一页面中的两个表

Question

我在同一页面上有2个表，我试图在每个表上方添加一个标题，但我无法做到。怎么办呢？

＆＃13;

＆＃13;

<div class="clearfix">
    <div class="table-header" ng-show="lists.col1Header">
        <div class="left">{{lists.col1Header}}ggg</div>
        <div class="left">{{lists.col2Header}}ggfff</div>
    </div>
    <div class="volume-info clearfix" ng-class="{'limited-height': limitedHeight}">
        <table class="information left" ng-class="{'single-list': lists.length == 1, 'multi-list': lists.length != 1}">
            <tr ng-repeat="data in lists[0]">
                <td ng-class="{'trimmed-text': data.trimmedKey}" title="{{data.trimmedKey? data.key : ''}}">{{data.key}}
                    <div class="info-list">
                        <ul ng-if="data.linkDataList && data.listShow" >
                            <li ng-repeat="listData in data.linkDataList" ng-class="{'trimmed-text': data.trimmedText}" title="{{data.trimmedText? listData.title : ''}}">
                                {{listData.value}}
                            </li>
                        </ul>
                    </div>
                </td>
                <td ng-class="{'trimmed-text': data.trimmedText}" title="{{data.trimmedText? (data.title || data.text) : ''}}">
                    {{data.text}}
                </td>
                <td class="list-icon">
                    <div ng-if="data.linkDataList.length > 0" ng-click="data.listShow = !data.listShow">
                        <i class="fa fa-chevron-down" ng-if="data.linkDataList && !data.listShow"></i>
                        <i class="fa fa-chevron-up" ng-if="data.linkDataList && data.listShow"></i>
                    </div>
                </td>
            </tr>
        </table>
        <table class="information right multi-list" ng-show="lists.length > 1">
            <tr ng-repeat="data in lists[1]">
                <td  ng-class="{'trimmed-text': data.trimmedKey}" title="{{data.trimmedKey? data.key : ''}}">{{data.key}}
                    <div class="info-list">
                        <ul ng-if="data.linkDataList && data.listShow" >
                            <li ng-repeat="listData in data.linkDataList" ng-class="{'trimmed-text': data.trimmedText}" title="{{data.trimmedText? listData.title : ''}}">
                                {{listData.value}}
                            </li>
                        </ul>
                    </div>
                </td>
                <td ng-class="{'trimmed-text': data.trimmedText}" title="{{data.trimmedText? (data.title || data.text) : ''}}">
                    {{data.text}}
                </td>
                <td class="list-icon">
                    <div ng-if="data.linkDataList.length > 0" ng-click="data.listShow = !data.listShow">
                        <i class="fa fa-chevron-down" ng-if="data.linkDataList && !data.listShow"></i>
                        <i class="fa fa-chevron-up" ng-if="data.linkDataList && data.listShow"></i>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="bottom-button-row">
        <button class="noc-close" ng-click="closeDialog()" autofocus>Close</button>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

关闭表标签后关闭div并使用css float：

    <div class="clearfix">
    <div class="table-header" ng-show="lists.col1Header">
        <div class="left"  style="float:left;">{{lists.col1Header}}ggg
    <div class="volume-info clearfix" ng-class="{'limited-height': limitedHeight}">
        <table class="information left" ng-class="{'single-list': lists.length == 1, 'multi-list': lists.length != 1}">
            <tr ng-repeat="data in lists[0]">
                <td ng-class="{'trimmed-text': data.trimmedKey}" title="{{data.trimmedKey? data.key : ''}}">{{data.key}}
                    <div class="info-list">
                        <ul ng-if="data.linkDataList && data.listShow" >
                            <li ng-repeat="listData in data.linkDataList" ng-class="{'trimmed-text': data.trimmedText}" title="{{data.trimmedText? listData.title : ''}}">
                                {{listData.value}}
                            </li>
                        </ul>
                    </div>
                </td>
                <td ng-class="{'trimmed-text': data.trimmedText}" title="{{data.trimmedText? (data.title || data.text) : ''}}">
                    {{data.text}}
                </td>
                <td class="list-icon">
                    <div ng-if="data.linkDataList.length > 0" ng-click="data.listShow = !data.listShow">
                        <i class="fa fa-chevron-down" ng-if="data.linkDataList && !data.listShow"></i>
                        <i class="fa fa-chevron-up" ng-if="data.linkDataList && data.listShow"></i>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </div>
    <div class="left"  style="float:left;">{{lists.col2Header}}ggfff
        <table class="information right multi-list" ng-show="lists.length > 1">
            <tr ng-repeat="data in lists[1]">
                <td  ng-class="{'trimmed-text': data.trimmedKey}" title="{{data.trimmedKey? data.key : ''}}">{{data.key}}
                    <div class="info-list">
                        <ul ng-if="data.linkDataList && data.listShow" >
                            <li ng-repeat="listData in data.linkDataList" ng-class="{'trimmed-text': data.trimmedText}" title="{{data.trimmedText? listData.title : ''}}">
                                {{listData.value}}
                            </li>
                        </ul>
                    </div>
                </td>
                <td ng-class="{'trimmed-text': data.trimmedText}" title="{{data.trimmedText? (data.title || data.text) : ''}}">
                    {{data.text}}
                </td>
                <td class="list-icon">
                    <div ng-if="data.linkDataList.length > 0" ng-click="data.listShow = !data.listShow">
                        <i class="fa fa-chevron-down" ng-if="data.linkDataList && !data.listShow"></i>
                        <i class="fa fa-chevron-up" ng-if="data.linkDataList && data.listShow"></i>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </div>
    <div class="bottom-button-row">
        <button class="noc-close" ng-click="closeDialog()" autofocus>Close</button>
    </div>
</div>

Answer 2

<div class="row">
    <div class="col-sm-2 col-sm-offset-2 table-header" ng-show="lists.col1Header">{{lists.col1Header}}</div>
    <div class="col-sm-2 col-sm-offset-4 table-header" ng-show="lists.col1Header">{{lists.col2Header}}</div>
</div>