格式化列標題的正確方法HTML

Question

Im使用角度材質製作Web應用程序。我有一個有7列的md-list。我想在每個列中顯示一個標題來指定其尊重值。我有標題，但有問題格式正確。我找到了這個答案here，它建議使用 或 在html中插入空格。

我很難接受把這麼多的空間放在這個位置是正確的。任何關於格式化每個行標題在其各自列上的建議？

非常感謝提前。

我曾嘗試：

 <div layout="column"> 
      <md-content class="md-padding" layout-padding> 
       <div class="md-list-column-headers" layout="row" flex="100"> 
       <h4><strong> User: &nbsp;&nbsp;&nbsp;&nbsp;</strong></h4> 
       <h4><strong> Title: &nbsp;&nbsp;&nbsp;&nbsp;</strong></h4> 
       <h4><strong> Description: &nbsp;&nbsp;&nbsp;&nbsp;</strong></h4> 
       <h4><strong> Rating: &nbsp;&nbsp;&nbsp;&nbsp;</strong></h4> 
       <h4><strong> Course: &nbsp;&nbsp;&nbsp;&nbsp;</strong></h4> 
       <h4><strong> Date: &nbsp;&nbsp;&nbsp;&nbsp;</strong></h4> 
       </div> 
       <md-list flex > 
       <md-list-item class="md-2-line" ng-href="{{item.url}}" target="_blank" ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse"> 
        <div class="md-list-item-text" layout="column" flex="5"> 
        <h4>{{$index + 1}}</h4> 
        </div> 
        <div class="md-list-item-text" layout="column" flex="10"> 
        <span></span> 
        <h4>name</h4> 
        <md-divider></md-divider> 
        </div> 
        <div class="md-list-item-text" layout="column" flex="20"> 
        <h4>{{item.title}}</h4> 
        <md-divider></md-divider> 
        </div> 
        <div class="md-list-item-text" layout="column" flex="10"> 
        <h4>{{item.description}}</h4> 
        <md-divider></md-divider> 
        </div> 
        <div class="md-list-item-text" layout="column" flex="10"> 
        <h4>{{item.description}}</h4> 
        <md-divider></md-divider> 
        </div> 
        <div class="md-list-item-text" layout="column" flex="5"> 
        <h4>{{item.score}}</h4> 
        <md-divider></md-divider> 
        </div> 
        <div class="md-list-item-text" layout="column" flex="10"> 
        <h4>{{item.course}}</h4> 
        <md-divider></md-divider> 
        </div> 
        <div class="md-list-item-text" layout="column" flex="15"> 
        <h4>{{item.timestamp}}</h4> 
        <md-divider></md-divider> 
        </div> 
       </md-list-item> 
       </md-list> 
      </md-content> 
      </div> 

format column headers

Answer 1

在標題列上放置與每行的列相同的柔度值。但是，真的，而不是試圖將md-list轉換成表格，使用專爲該作業設計的組件會更好。我一直在IE中遇到性能問題，md-list是其中一個肇事者。嘗試這樣的：https://github.com/daniel-nagy/md-data-table

或只是谷歌angular material table更多選項。

Answer 2

嘗試，包括表頭作爲列表項，使用layout="row"。