CSS技巧分享：纯CSS实现表格响应式布局

什么是响应式布局？

在移动设备的普及和互联网的高速发展下，越来越多的用户习惯于使用手机、平板等移动设备上网浏览网页。而以前的网页通常是固定宽度的，如果在移动设备上访问，就会出现横向滚动条，用户体验非常差。所以，响应式布局诞生了，它能够根据设备屏幕的宽度自适应地调整布局，以解决不同设备上浏览体验的问题。

什么是纯CSS实现表格响应式布局？

在响应式布局中，表格也需要调整布局以适应不同屏幕。通常，我们可以通过css media query来实现响应式表格布局。纯CSS实现表格响应式布局的意思是，在不使用JavaScript或其他工具的情况下，使用纯CSS来实现表格的响应式布局。

如何实现纯CSS的表格响应式布局？

1.使用CSS3的@media查询

在css中使用@media查询时，可以设置不同屏幕尺寸下的样式。首先，为表格的<tr>和<td>标签添加样式，使它们适应不同的屏幕宽度。

/* 应用于h1元素 */
tr,td{
    box-sizing:border-box;
    display:block;
}
/*当屏幕宽度小于等于600像素时*/
@media screen and (max-width:600px){
    /* 每个表格行变成块级元素 */
    tr{
        display:block;
    }
    /* 表格数据变成块级元素，并添加样式 */
    td{
        display:block;
        text-align:right;
        border: none;
        position:relative;
        padding-left:50%;
    }
    /*表格数据的伪元素添加左边距和右边框*/
    td:before{
        content:attr(data-label);
        position:absolute;
        left:0;
        width:50%;
        padding-right:10px;
        margin-left:-50%;
        text-align:left;
        color:#535353;
        font-weight:bold;
    }
}

在上面的代码中，首先为所有的<tr>和<td>标签添加样式，以便在响应式布局中使用。接着，在@media查询中，将<table>中的每一行<tr>变成块级元素，并将每个<td>标签也变成块级元素。为了保证表格中的内容能够按照正确的位置排布，给每个<td>标签添加一个相对定位，并把padding-left设置为50%。接着，我们为<td>标签添加一个伪元素:before，并设置content属性为data-label，这个属性的值就是在<td>标签中的data-label属性的值。这个伪元素的作用是用来显示表格中每个字段的名字，它与<td>标签的位置在一行。最后，设置这个伪元素的样式属性，让它显示左边的数据标签和右边的边框。

2.应用flexbox布局

flexbox布局是CSS3新引入的一种布局模式，可以用来创建更灵活的布局。可以通过设置flexbox的flex-direction属性来控制行或列的排列顺序。

/* 应用于h2元素 */
table{
    width:100%;
    border-collapse:collapse;
    border-spacing:0;


margin:10px auto;


display: flex;
    flex-direction: column;


align-items: stretch;
}
/* 应用于h3元素 */
tr{


display:flex;
    border-bottom: 1px solid #ccc;
    padding: 0;
    margin: 0;


width: 100%;
}
td, th{


flex: 1;
    padding: 8px;
    text-align: center;
}
/*当屏幕宽度小于等于600像素时*/
@media screen and (max-width: 600px) {


tr {
        flex-direction: column;
        margin-bottom: 10px;
        border-bottom: none;
    }


td:before {
        display: block;
        position: relative;
        content: attr(data-label);
        text-align: left;
        font-weight:bold;
        background-color:#fafafa;
        color:#6f6f6f;
        width: 50%;
        margin:0;
        padding: 8px;
    }
}

在上面代码中，以<h2>元素的选择器为目标，设置<table>的样式。在<h3>元素的选择器下，设置<tr>和<td>的样式。注意，为了适应不同屏幕大小，设置每一行<tr>都是flex布局，通过设置flex-direction属性来使每个<td>元素排成一行。接着，在@media查询中，将<tr>中的每个<td>元素之前插入伪元素，并设置伪元素下面的数据标签样式并显示。

总结

响应式布局是目前前端开发不可或缺的一个需求。本文介绍了两种实现表格响应式布局的方法，分别是使用CSS3的media query和flexbox布局。希望能帮助大家实现响应式布局。