Kendo ui 应用'；数据标题'；到剑道UI网格TDs？

我使用的是KendoUI网格，它很棒，但在移动设备上响应不好，所以我希望实现这一点。它基本上隐藏了标题，使所有单元格都显示：block以进行堆叠，然后在td左侧创建一个假标题，标题为

td:before{content:“td header title”}

唯一的问题是，这将应用于许多具有未知thead字段的不同表，所以我不能这样做

td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
etc

理想情况下，我会将标题列标题应用于TDs，以便它能够呈现

数据

。然后在CSS中，我可以做：

td:before { content: attr(data-title); }

那会很好，但我不确定这是否可能。也许其他人有其他想法

例：

Jane

编辑：看起来我将使用jQuery解决方案：

function tableResizer() {
    var headerTitleArray = [];

    // create array of table header titles
    $('.k-grid-header-wrap th').each(function () {
        headerTitleArray.push($(this).attr('data-title'));
    });

    // append tables headers to each td
    $('.k-grid-content tr').each(function () {
        $(this).find('td').each(function (i) {
            if (typeof headerTitleArray[i] !== 'undefined') { // some headers don't have a title
                $(this).prepend('<span class="td-title">' + headerTitleArray[i] + '</span>');
            }
        });
    });
}

函数tableResizer（）{
var headerTitleArray=[]；
//创建表格标题数组
$（'.k-grid-header-wrap th'）。每个（函数（）{
headerTitleArray.push（$（this.attr（'data-title'））；
});
//将表头附加到每个td
$（'.k-grid-content tr'）。每个（函数（）{
$（this.find（'td'）。每个（函数（i）{
if（typeof headerTitleArray[i]！=='undefined'）{//某些标题没有标题
$（this）.prepend（“”+headerTitleArray[i]+“”）；
}
});
});
}

我认为您更应该使用javascript，例如：

$("td").each(function() {
    $(this).prepend("<span class='before'>" + $(this).data('title') + "</span>");
});

$（“td”）。每个（函数（）{
$（this）.prepend（“+$（this）.data（'title'）+”）；
});

并且将类

before

样式设置为您的

td:before

---

看这把小提琴：

谢谢你，伙计。不幸的是，它比这更复杂，因为Kendo从服务器数据生成表，而不是像那样向TD添加数据标题。这就是我想弄明白的。看起来我要用jQuery的方式，但它比这个复杂一点。我将在上面的帖子中发布代码。@dmathisen我看到了您的编辑，您的解决方案很好。。。只需注意类名称：它们在这里以

t-

开头（而不是

k-

…），并且您还应该将

.td title

样式设置为

td:before

。看看这把小提琴：。谢谢你，伙计。现在似乎工作得很好。我最后要做的是调用tableResizer函数，并在该函数中执行“addClass（'compressed'）”。所以在调整窗口大小时，它会检查大小并根据需要添加/删除“压缩”类。看起来比需要的更复杂，但它是有效的。谢谢你看！