telerik - 响应式 Kendo UI 网格示例

Question

我已经在我的 WebApp 中实现了 KendoUI，有没有办法让网格响应？
就像，在较小的分辨率下显示较少的列!

Answer 1

在应用以下样式之前，这是我的引导式 Kendo UI 网格



这就是你之后得到的。可能并不完美，或者有些人会认为足够“响应”。但是，对于我的用户来说，这是一种享受。无论如何，电话不是我们的目标平台，但是，现在我们至少可以看到网格中的内容，即使我们无法对其进行排序......等等。



这里是受@Vel 的 codepen 启发的样式，来自本主题前面的部分。
他的 codepen 样式缺少隐藏 colgroup 元素的 statemetn .. 这对于这种方法是不可或缺的。
确保将此 CSS 放在您的页面流中，在主剑道 CSS 文件之后的某个位置

@media screen and (max-width: 800px) {

.k-widget table {
    border: 0;
}

.k-widget table thead, table colgroup {
    display: none;
}

.k-widget table tr {
    margin-bottom: 10px;
    display: block;
    border-bottom: 2px solid #ddd;
    border-radius: 20px;
}
.k-widget table tr td:last-child {
    background-color: #313444;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.k-widget table tr td:nth-child(2) {
    background-color: #313444;
    color: #FFF;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-weight: bold;
    padding-top:1em;
}

.k-widget table td {
    display: block;
    font-size: 13px;
    border-bottom: 1px dotted #ccc;
}
.k-widget table td:before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
}
}