bootstrap table表格内容居中对齐

官方网站:
http://bootstrap-table.wenzhixin.net.cn/
参考文档:http://issues.wenzhixin.net.cn/bootstrap-table/index.html
中文文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
下载bootstrap Table插件所必须的js,地址:https://github.com/wenzhixin/bootstrap-table

在开发项目的时候,发现了一款JS组件系列——表格组件神器
,官方文档也比较简单,总结了一些常遇到的问题

实现一个简单的表格和分页,内容居中对齐

bootstrap table表格内容居中对齐_第1张图片
图片.png



    
        
        Dashboard | Nadhif - Responsive Admin Template

        
        
        
        
        
        

        
        
        
        
        
    

    
        

json数据:

    [  
        {  
            "id": 0,  
            "name": "Item 0",  
            "price": "$0"  
        },  
        {  
            "id": 1,  
            "name": "Item 1",  
            "price": "$1"  
        },  
        {  
            "id": 2,  
            "name": "Item 2",  
            "price": "$2"  
        },  
        {  
            "id": 3,  
            "name": "Item 3",  
            "price": "$3"  
        },  
        {  
            "id": 4,  
            "name": "Item 4",  
            "price": "$4"  
        },  
        {  
            "id": 5,  
            "name": "Item 5",  
            "price": "$5"  
        },  
        {  
            "id": 6,  
            "name": "Item 6",  
            "price": "$6"  
        },  
        {  
            "id": 7,  
            "name": "Item 7",  
            "price": "$7"  
        },  
        {  
            "id": 8,  
            "name": "Item 8",  
            "price": "$8"  
        },  
        {  
            "id": 9,  
            "name": "Item 9",  
            "price": "$9"  
        },  
        {  
            "id": 10,  
            "name": "Item 10",  
            "price": "$10"  
        },  
        {  
            "id": 11,  
            "name": "Item 11",  
            "price": "$11"  
        },  
        {  
            "id": 12,  
            "name": "Item 12",  
            "price": "$12"  
        },  
        {  
            "id": 13,  
            "name": "Item 13",  
            "price": "$13"  
        },  
        {  
            "id": 14,  
            "name": "Item 14",  
            "price": "$14"  
        },  
        {  
            "id": 15,  
            "name": "Item 15",  
            "price": "$15"  
        },  
        {  
            "id": 16,  
            "name": "Item 16",  
            "price": "$16"  
        },  
        {  
            "id": 17,  
            "name": "Item 17",  
            "price": "$17"  
        },  
        {  
            "id": 18,  
            "name": "Item 18",  
            "price": "$18"  
        },  
        {  
            "id": 19,  
            "name": "Item 19",  
            "price": "$19"  
        },  
        {  
            "id": 20,  
            "name": "Item 20",  
            "price": "$20"  
        }  
    ]  

效果如下所示


bootstrap table表格内容居中对齐_第2张图片

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚,欢迎关注【编程微刊】公众号,回复【领取资源】,500G编程学习资源干货免费送。

你可能感兴趣的:(bootstrap table表格内容居中对齐)