Question

您好我有一个简单的角度应用程序，当组件加载

时显示以下内容

由于某种原因，该表未在左侧面板中显示全宽

模板代码如下

<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
      <h3>Tasks Page    
      <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp full-width">
          <thead>
            <tr>
              <th class="mdl-data-table__cell--non-numeric full-width">Material</th>
              <th>Quantity</th>
              <th>Unit price</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
              <td>25</td>
              <td>$2.90</td>
            </tr>
            <tr>
              <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
              <td>50</td>
              <td>$1.25</td>
            </tr>
            <tr>
              <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
              <td>10</td>
              <td>$2.35</td>
            </tr>
          </tbody>
      </table>
</div>

我有什么想法可以展示桌子的全宽吗？

Answer 1

只需用

更改此行

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp full-width">

带

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp full-width" style='width:100%'>

使用col-12

尝试这个

<div class="demo-graphs  mdl-color--white mdl-cell mdl-cell--12-col">

Updated Working Plunker

材料设计表不显示全角度Angular2

1 个答案: