html – 将Material Design Lite表格的100%宽度的正确方法是什么?

前端之家收集整理的这篇文章主要介绍了html – 将Material Design Lite表格的100%宽度的正确方法是什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在研究使用 Google’s Material Design Lite框架,我想知道如何使表跨越其包含元素的100%宽度:

拿这个表:

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">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>

如何使这个MDL表跨越它的容器的100%?

docs开始,我已经设置了这个JSFiddle.

解决方法

只需添加一个新的fullwidth类到table和th,直接将宽度设置为100%.

尝试这个fiddle

猜你在找的HTML相关文章