旺客族网络 | SEO工具 | 成都SEO - 专注中小企业网络推广9年!
>网络推广 > SEO技术 » 正文

响应式表格;表格随屏幕自适应源码怎么写?

栏目:SEO技术 | 2019-05-31 12:25:36 | 人围观 | 评论:

  响应式表格;表格自适应;表格随屏幕自适应源码分享

  1.一种简单的自适应表格制作方案,就是通过给表格的外面加了一个.table-container的标签
  html:

  <!DOCTYPE html><html>
  <head>
  .....  </head>
  <body>
  <div class="table-container">
  <table>
  ....      </table>
  </div>
  </body></html>


  css:
  .table-container
  {
  width: 100%;
  overflow-y: auto;
  _overflow: auto;
  margin: 0 0 1em;
  }
  table{border:0; border-collapse:collapse;}
  table td,table th{border:1px solid #999; padding:.5em 1em}//添加IOS下滚动条.table-container::-webkit-scrollbar
  {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  }

  .table-container::-webkit-scrollbar-thumb
  {
  border-radius: 8px;
  border: 3px solid #fff;background-color: rgba(0, 0, 0, .3);
  }


  1.隐藏表格
  随着屏幕宽度变小而删除一些内容

  @media only screen and (max-width: 800px) {#unseen table td:nth-child(2),#unseen table th:nth-child(2) {display: none;}
  }

  @media only screen and (max-width: 640px) {#unseen table td:nth-child(4),#unseen table th:nth-child(4),#unseen table td:nth-child(7),#unseen table th:nth-child(7),#unseen table td:nth-child(8),#unseen table th:nth-child(8){display: none;}
  }


  3.翻转滚动表格
  当屏幕宽度小于800时,表格内容则会发生翻转,表头的内容会放在左边。右边则是会出现滚动,超出的隐藏。这个要求是表格比较完整,不然不是很好看。在表格的外面加个#flip-scroll
  table tr td, table tr th{white-space:nowrap;}
  @media only screen and (max-width: 800px) {#flip-scroll .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }#flip-scroll * html .cf { zoom: 1; }#flip-scroll *:first-child+html .cf { zoom: 1; }#flip-scroll table { width: 100%; border-collapse: collapse; border-spacing: 0; }#flip-scroll th,#flip-scroll td { margin: 0; vertical-align: top; }#flip-scroll th { text-align: left; }#flip-scroll table { display: block; position: relative; width: 100%; }#flip-scroll thead { display: block; float: left; }#flip-scroll tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }#flip-scroll thead tr { display: block; }#flip-scroll th { display: block; text-align: right; }#flip-scroll tbody tr { display: inline-block; vertical-align: top; }#flip-scroll td { display: block; min-height: 1.25em; text-align: left; }/* sort out borders */#flip-scroll th { border-bottom: 0; border-left: 0; }#flip-scroll td { border-left: 0; border-right: 0; border-bottom: 0; }#flip-scroll tbody tr { border-left: 1px solid #babcbf; }#flip-scroll th:last-child,#flip-scroll td:last-child { border-bottom: 1px solid #babcbf; }
  }

表格示范:

   
 


  
   


 

 

 

标签:SEO技术