在同一頁面中添加兩個表格的標題

我在同一頁面上有兩個表格，我試圖在每個表格上添加一個標題，但無法做到。如何才能做到這一點？在同一頁面中添加兩個表格的標題

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

來源

2016-02-23 li-raz

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

來源

2016-02-23 16:08:30

不是真正的工作 - 表現在 - 不是並排 –

試試吧沒有你的CSS文件。並通過顯示你的CSS來提供更多的輸入。 –

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

來源

2016-02-23 20:00:59

在同一頁面中添加兩個表格的標題

回答

相關問題