网页表格如何自适应

随着手机这类小屏幕大行其道，网页设计里面开始流行自适应布局（Responsive Layout）。

所谓的自适应，说白了就是网页在小屏幕上美观地展示。绝大部分的网页元素都能找到对应的自适应表达方式，唯独表格有些难实现。

今天说的就是如何解决 table 元素的自适应性。

观看演示

我们借助css的伪元素:before来实现的。大家看看代码就懂了。

如果每个 table 都这样子写，会累死的，所以我写了一段JS，用来自己生成 data-label 这个属性。

/**
 * 为所有的table.table的tbody>tr>td添加data-label属性，该属性的数值来自对应的thead>th。
 * mobile.less里面的表格自适应，可以做出自适应表格的效果
 */
$(function(){
    $('table.table').each(function(){
        var self = $(this);
        if(self.find('thead').length > 0 && self.find('tbody').length > 0){
            var th = [];
            self.find('thead th').each(function(){
                th.push($(this).text());
            });
            self.find('tbody tr').each(function(){
                var $tr = $(this);
                var $td = $tr.find('>td');
                for(var i=0; i < $td.length; i++){
                    $($td[i]).attr('data-label', th[i]);
                }
            });
        }
    });
});