Material-design-lite: mdl-data-table 中的响应性

数据表没有响应，因为没有关于如何在小屏幕上处理表的 MD 规范。 本质上，表是不响应的。 您需要手动处理使它们具有响应性，或者为移动设备而不是桌面使用不同的设计（如基于卡片的设计）。

你好。 我正在使用此样式来修复此样式，并将表格与这样的“div”关联起来：

<div class="table-responsive"><table...

.table-responsive { min-height: .01%; overflow-x: auto; } <strong i="8">@media</strong> 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; } }

字体： stackoverflow

您可以使用 css 在 div 中编写数据表（溢出：滚动）
或者，如果您想要所谓的响应性，则将 css (width:100%) 应用于表格。