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代码就可以实现在自己建网站时，将自己网站的表格变为自适应表格了。

除了上面的这种方法以外，还可以模仿BOOTSTRAP框架实现表格自适应的方法。如下：

1. 在<table>表格标签外面加一个DIV；

   
   <div class="table-responsive">
   
   <table>
   
   ……
   
   </table>
   
   </div>
   
   

2. 在CSS中添加以下的样式代码，用于控制表格自适应；

   
    .table-responsive { width: 100%;margin-bottom: 15px;overflow-y: hidden;-ms-overflow-style: -ms-autohiding-scrollbar;border: 1px solid #ddd;}
   
   .table-responsive {min-height: .01%;overflow-x: auto;}
   
   .table {width: 100%;max-width: 100%;}
   
   .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {padding: 8px;line-height: 1.42857143;vertical-align: top;border-top: 1px solid #ddd;}