Question

我使用角度材料制作Web应用程序。我有一个有7列的md列表。我想在每个列中显示一个标题以指定其值。我有标题但是正确地格式化它们。我找到了这个答案here，建议使用&emsp;或 在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

尝试使用layout="row"将表标题作为列表项包括在内。

Answer 2

在标题列上放置与每行的列相同的flex值。但是，实际上，不是试图将md-list变成表格，而是使用专为此工作设计的组件会好得多。我一直在IE中遇到性能问题，而md-list是其中的罪魁祸首之一。尝试这样的事情：https://github.com/daniel-nagy/md-data-table

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

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

2 个答案: