自适应table

最新推荐文章于 2023-08-31 11:07:19 发布

zhangzhao100110

最新推荐文章于 2023-08-31 11:07:19 发布

阅读量484

点赞数

分类专栏： WEB前端文章标签：自适应表格移动端

WEB前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

在手机竖屏和PAD端表格显示的自适应处理，摘自《高性能HTML5》

复制粘贴就可以看效果哦。d

<!DOCTYPE HTML>
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
 .table ul,.table li{
  padding:0;
  margin:0;
  list-style:none;
 }
 .table{
  display:table;
 }
 .tr{
  display:table-row;
 }
 .td{
  display:table-cell;
 }
 .table,.tr,.td{
  border:1px solid #ccc;
  border-collapse:collapse;
 }
 .tableTreatment1{
  width:800px;
  -webkit-box-shadow:2px 2px 2px #999999;
  -moz-box-shadow:2px 2px 2px #999999;
  box-shadow:2px 2px 2px #999999;
 }
 .tableTreatment1 .first{
  background:#c8dfff;
  font-weight:bold;
 }
 .tableTreatment2{
  width:320px;
 }
 .tableTreatment2 .table,.tableTreatment2 .tr,.tableTreatment2 .td{
  border:none;
 }
 .tableTreatment2 .tableHead{
  display:none;
 }
 .tableTreatment2 .tr{
  width:200px;
 }
 .tableTreatment2 .td{
  display:block;
  float:none;
  padding:5px;
 }
 .tableTreatment2 .td:first-child{
  color:white;
  font-weight:bold;
  text-shadow:0 0 3px #333;
  background:#aebcbf;
 }
 .tableTreatment2 .td:before{
  content:attr(data-colhead)":";
  font-weight:bold;
  color:#777;
 }

 .tableTreatment2 .td:first-child:before{
  content:"";
 }

 @media only screen and (max-width:767px){
  .tableTreatment1{
   width:320px;
  }
  .tableTreatment1 .table,.tableTreatment1 .tr,.tableTreatment1 .td{
   border:none;
  }
  .tableTreatment1 .tableHead{
   display:none;
  }
  .tableTreatment1 .tr{
   width:200px;
  }
  .tableTreatment1 .td{
   display:block;
   float:none;
   padding:5px;
  }

  .tableTreatment1 .td:first-child{
      color:white;
   font-weight:bold;
   text-shadow:0 0 3px #333;
   background:#aebcbf;
  }

  .tableTreatment1 .td:before{
   content:attr(data-colhead) ": ";
   font-weight:bold;
   color:#777;
  }

  .tableTreatment1 .td:first-child:before{
   content:"";
  }
 }
  </style>
 </head>

 <body>
  <div class="table tableTreatment1">
 <ul class="tr tableHead">
    <li class="td" data-colhead=""></li>
    <li class="td" data-colhead="The Head">
  The head
    </li>
    <li class="td" data-colhead="B">
  B
    </li>
    <li class="td" data-colhead="C">
  C
    </li>
    <li class="td" data-colhead="D">
  D
    </li>
    <li class="td" data-colhead="E">
  E
    </li>
 </ul>
 <ul class="tr tableBody">
    <li class="td first" data-colhead="">
  0000
    </li>
    <li class="td" data-colhead="The Head">
  The head  a
    </li>
    <li class="td" data-colhead="B">
  BBBBBBB
    </li>
    <li class="td" data-colhead="C">
  CCCCCCC
    </li>
    <li class="td" data-colhead="D">
  DDDDDDD
    </li>
    <li class="td" data-colhead="E">
  EEEEEEE
    </li>

 </ul>
 <ul class="tr tableBody">
    <li class="td first" data-colhead="">
  111111
    </li>
    <li class="td" data-colhead="The Head">
  The head  a
    </li>
    <li class="td" data-colhead="B">
  BBBBBBB
    </li>
    <li class="td" data-colhead="C">
  CCCCCCC
    </li>
    <li class="td" data-colhead="D">
  DDDDDDD
    </li>
    <li class="td" data-colhead="E">
  EEEEEEE
    </li>

 </ul>
 <ul class="tr tableBody">
    <li class="td first" data-colhead="">
  22222
    </li>
    <li class="td" data-colhead="The Head">
  The head  a
    </li>
    <li class="td" data-colhead="B">
  BBBBBBB
    </li>
    <li class="td" data-colhead="C">
  CCCCCCC
    </li>
    <li class="td" data-colhead="D">
  DDDDDDD
    </li>
    <li class="td" data-colhead="E">
  EEEEEEE
    </li>

 </ul>
  </div>
 </body>
</html>