如何用纯CSS实现自适应布局表格

发布网友

我来回答

共1个回答

热心网友

 /*屏幕宽度小于600px时触发*/
        @media screen and (max-width: 600px){ 
            table{
                 border:0
            }

            table thead{
                 display: none;
            }

            table tr{
                margin-bottom: 10px;
                display: block;/*设置成块级元素实现换行*/
                border-bottom: 2px solid #ddd;
            }

            table td{ 
                display: block;
                text-align: right;
                font-size: 13px;
                border-bottom: 1px dotted #ccc;
            }

            table td:last-child{
                border-bottom: 0;
            }

            table td:before{/*模拟标题的效果*/
                content:attr(data-label);
                float: left;
                text-transform: uppercase;
                font-weight: bold;
            }
        }