javascript - 响应式设计 - 宽表

Question

<分区>

Answer 1

最好的方法是完全重新格式化表格:

http://jsfiddle.net/MLZEb/9/

tbody, tr, th, td { display: block }
thead { display: none }
td:before {
    content: attr(data-label);
    display: inline-block;
    width: 6em;
    padding-right: 1em;
    vertical-align: middle;
}

td:first-child {
    background: #CCC;
}

每个td需要有一个 data-label使其有效工作的属性:<td data-label="Favorite Color">Blue</td> .典型 th作为列标题的元素应在 thead 内标签。