零基础建站培训教程介绍

当前位置:

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

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

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

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

PC站Table表格
普通Table表格

手机自适应的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;}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

学做网站论坛零基础学建网站课程