响应式表格布局

西部世界
西部世界
管理员
353
文章
0
粉丝
网站技术字数 717阅读2分23秒阅读模式
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>响应式表格布局</title>
  6.     <link rel="stylesheet" type="text/css" href="begin.css" />
  7. </head>
  8. <body>
  9.     <h1>课程</h1>
  10.     <table class="responsive">
  11.         <thead>
  12.         <tr>
  13.             <th>程序序号</th>
  14.             <th>课程名称</th>
  15.             <th>课程操作</th>
  16.         </tr>
  17.         </thead>
  18.         <tr>
  19.             <td class="number">150406</td>
  20.             <td class="name">移动应用开发</td>
  21.             <td class="actions">
  22.                 <a href="#">修改</a><a href="del">删除</a>
  23.             </td>
  24.         </tr>
  25.         <tr>
  26.             <td class="number">150407</td>
  27.             <td class="name">HTML前段开发</td>
  28.             <td class="actions">
  29.                 <a href="#">修改</a><a href="del">删除</a>
  30.             </td>
  31.         </tr>
  32.     </table>
  33. </body>
  34. </html>
复制代码
  1. h1{
  2.     font-size: 30px;
  3.     text-align: center;
  4.     color: #666666;
  5. }
  6.  
  7. <!-- 设置表格外边框 -->
  8. table.responsive{
  9.     width: 98%;
  10.     margin: 0 auto;
  11.     border: 1px solid #666666;
  12. 　　<!-- 设置表格单元格边框合并在一起 -->
  13.     border-collapse: collapse;
  14.     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
  15.     -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
  16.     box-shadow: 0 0 10px rgba(0, 0, 0, .6);
  17. }
  18. <!-- 设置表格单元格边框 -->
  19. table.responsive th,table.responsive td{
  20.     border: 1px solid #666666;
  21.     padding: .5em 1em;
  22. }
  23. <!-- 设置表头颜色 -->
  24. table.responsive th{
  25.     background: #35B558;
  26. }
  27. <!-- 设置超链接格式 -->
  28. table.responsive .actions a{
  29.     color: #ff5c00;
  30. 　　<!-- 设置超链接字体没有下划线 -->
  31.     text-decoration: none;
  32.     padding: 0 4px;
  33. }
  34. table.responsive .number,table.responsive .actions{
  35.     text-align: center;
  36. }
  37.  
  38. <!-- 捕捉浏览器宽度最大为480px时触发以下css样式 -->
  39. @media (max-width: 480px) {
  40. 　　<!-- 清除其它宽度下所设置的表格样式 -->
  41.     table.responsive{
  42.         -webkit-box-shadow: none;
  43.         -moz-box-shadow: none;
  44.         box-shadow: none;
  45.         border: none;
  46.     }
  47. 　　<!-- 隐藏表头（这里的隐藏与visiblity隐藏不同，这里的隐藏将不会为隐藏部分留下空白位置，而visiblity会为隐藏部分留下空白位置） -->
  48.     table.responsive thead{
  49.         display: none;
  50.     }
  51. 　　<!-- 将所有表格变成块级元素，以使表格独行显示 -->
  52.     table.responsive td{
  53.         display: block;
  54.         border: none;
  55.     }
  56. 　　<!-- 设置第一例左对齐并添加颜色 -->
  57.     table.responsive .number{
  58.         text-align: left;
  59.         background: #35B558;
  60.     }
  61. 　　<!-- 在第一例文字前面添加文字 -->
  62.     table.responsive .number:before{
  63.         content: '课程序号';
  64. 　　　　 <!-- 在此处设置padding是避免设置number为相对路径 -->
  65.         padding-right: 20px;
  66.         font-weight: bold;
  67.     }
  68.     table.responsive .name:before{
  69.         content: '课程名称';
  70.         padding-right: 20px;
  71.         font-weight: bold;
  72.     }
  73. 　　 <!-- 设置相对路径，以便子元素使用绝对路径 -->
  74.     table.responsive tr{
  75.         position: relative;
  76.     }
  77. 　　<!-- 通过绝对路径设置修改删除在第一行：
  78. 　　　　　　因number的position值为static，所以number会在tr容器的第一行，
  79. 　　　　　　这里修改删除通过绝对路径，设置距tr容器上面0px，则修改删除也会出现在tr容器第一行，这里一定要设置tr位置为相对路径 -->
  80.     table.responsive .actions{
  81.         position: absolute;
  82.         right: 0;
  83.         top: 0;
  84.     }
  85.  
  86. }

文章末尾固定信息

 
西部世界
  • 本文由 西部世界 发表于2019年11月6日 17:15:17
  • 转载请务必保留本文链接：https://www.cnhawkit.com/1304.html
  • 响应式表格布局
宝塔面板使用后台地址登录不了显示空白页怎么解决

加载中...