CSS如何控制Table表格实现自适应

很多自适应网站制作时都遇到这样的问题，文字和图片很容易实现自适应，但网站内容页的表格即很难实现自适应。当我们使用电脑浏览网站时，表格显示正常，但如果使用手机浏览时，表格就会超出手机屏幕宽度。

那么如何实现网站Table表格自适应呢？其实我们只需要给网站的Table表格添加一段CSS样式代码即可。

先让我们看下Table表格自适应的效果：

PC站Table表格

手机自适应的Table表格

方法很简单，只需要将以下的CSS样式 代码放到自己网站的CSS文件中即可，用于控制手机状态下的Table表格自适应。（可以根据自己网站的需要做一些修改，如果不会CSS，可以先学习一下建站入门基础教程）

?@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: 14px;

?     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;

?   }

? }

通过加上这样的CSS代码就可以实现在自己建网站时，将自己网站的表格变为自适应表格了。

标签： isp 代码 建网站 建站 网站制作

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。