html - 格式化列标题 HTML 的正确方法

Question

我正在使用 Angular Material 来制作 Web 应用程序。我有一个包含 7 列的 md-list。我想在每一列中显示一个标题以指定其尊重的值(value)。我有标题，但在正确格式化它们时遇到问题。我找到了这个答案 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

在标题列上放置与在每一行的列上所做的相同的 flex 值。但是，实际上，与其尝试将 md-list 转换为表格，不如使用专为该工作设计的组件。我一直被 IE 中的性能问题所困扰，md-list 是罪魁祸首之一。尝试这样的事情:https://github.com/daniel-nagy/md-data-table

或者只是谷歌 angular material table更多选项。