列見出しを正しくフォーマットする方法HTML

Question

Webアプリケーションを作成するには、角度のある素材を使用してください。私は7つの列を持つmdリストを持っています。私はそれぞれの列にその尊重された値を指定するヘッダーを表示したいと思います。私はヘッダーを持っていますが、正しく書式設定する際に問題があります。この答えはhereです。これは、 または を使用してhtmlにスペースを挿入することを示唆しています。

私はこのように多くのスペースを入れることが適切な方法であることを受け入れるのは難しい時です。それぞれの列の上にある各行見出しの書式設定についての提案はありますか？

事前に感謝します。私が試してみました何

：layout="row"を使用して、リスト項目としてテーブルヘッダを含む

 <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は犯人の一人でした。次のような方法を試してみてください：

さらに多くのオプションについてはangular material tableのgoogleをご覧ください。

Answer 2

してみてください。