对于 MDL tables ,是否有使表格响应的属性?
最佳答案
要使 material design lite table 具有响应性,您可以使用与 .table-responsive
相同的原理。 bootstrap 类。然后表格将在小型设备上水平滚动(768 像素以下)。在宽度大于 768 像素的物体上查看时,没有区别。
如果您不想包含整个引导库,请在您的项目中包含以下 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;
}
}
然后,只需将 Material 设计表包裹在带有
.table-responsive
的 div 标签中。类(class):<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>
这应该在小型设备中创建下表:
关于material-design-lite - 如何使 MDL 表响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32317740/