如何使MDL表响应？

Question

对于MDL表,是否有一个属性可以使表响应？

Answer 1

为了使材质设计精简表响应,您可以使用相同.table-responsive的bootstrap类原理.然后,表将在小型设备(768px下)上水平滚动.在大于768px宽的任何东西上观看时,没有区别.

如果您不想包含整个引导程序库,请在项目中包含以下CSS:

.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}
@media screen and (max-width: 767px) {
    .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }
    .table-responsive > .table {
        margin-bottom: 0;
    }
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > th,
    .table-responsive > .table > tfoot > tr > th,
    .table-responsive > .table > thead > tr > td,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > td {
        white-space: nowrap;
    }
    .table-responsive > .table-bordered {
        border: 0;
    }
    .table-responsive > .table-bordered > thead > tr > th:first-child,
    .table-responsive > .table-bordered > tbody > tr > th:first-child,
    .table-responsive > .table-bordered > tfoot > tr > th:first-child,
    .table-responsive > .table-bordered > thead > tr > td:first-child,
    .table-responsive > .table-bordered > tbody > tr > td:first-child,
    .table-responsive > .table-bordered > tfoot > tr > td:first-child {
        border-left: 0;
    }
    .table-responsive > .table-bordered > thead > tr > th:last-child,
    .table-responsive > .table-bordered > tbody > tr > th:last-child,
    .table-responsive > .table-bordered > tfoot > tr > th:last-child,
    .table-responsive > .table-bordered > thead > tr > td:last-child,
    .table-responsive > .table-bordered > tbody > tr > td:last-child,
    .table-responsive > .table-bordered > tfoot > tr > td:last-child {
        border-right: 0;
    }
    .table-responsive > .table-bordered > tbody > tr:last-child > th,
    .table-responsive > .table-bordered > tfoot > tr:last-child > th,
    .table-responsive > .table-bordered > tbody > tr:last-child > td,
    .table-responsive > .table-bordered > tfoot > tr:last-child > td {
        border-bottom: 0;
    }
}

然后,使用.table-responsive类将材料设计表包装在div标签内:

<div class="table-responsive">
<table class="mdl-data-table mdl-data-table--selectable mdl-shadow--2dp" style="margin: 0 auto;">
    <thead>
        <tr>
            <th class="mdl-data-table__cell--non-numeric">Property</th>
            <th>Type</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="mdl-data-table__cell--non-numeric">single</td>
            <td>Function</td>
            <td>Start the single file picker.</td>
        </tr>
        <tr>
            <td class="mdl-data-table__cell--non-numeric">multi</td>
            <td>Function</td>
            <td>Start the multi file picker.</td>
        </tr>
    </tbody>
</table>
</div>

这应该在一个小设备中创建下表:

Answer 2

一种选择是除了 MDL (Material Design Lite) 之外还使用 bootstrap。使用 bootstrap，可以使用以下方法使表格响应：<div class="table-responsive"> </div>MDL 表可以添加到 div 元素中。