通過css媒體查詢捕捉瀏覽器的大小，來改變css樣式，本例是改變表格的樣式
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>響應式表格布局</title> <link rel="stylesheet" type="text/css" href="begin.css" /> </head> <body> <h1>課程</h1> <table class="responsive"> <thead> <tr> <th>程序序號</th> <th>課程名稱</th> <th>課程操作</th> </tr> </thead> <tr> <td class="number">150406</td> <td class="name">移動應用開發</td> <td class="actions"> <a href="#">修改</a><a href="del">刪除</a> </td> </tr> <tr> <td class="number">150407</td> <td class="name">HTML前段開發</td> <td class="actions"> <a href="#">修改</a><a href="del">刪除</a> </td> </tr> </table> </body> </html>
css
h1{ font-size: 30px; text-align: center; color: #666666; }
<!-- 設置表格外邊框 --> table.responsive{ width: 98%; margin: 0 auto; border: 1px solid #666666;
<!-- 設置表格單元格邊框合並在一起 --> border-collapse: collapse; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .6); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .6); box-shadow: 0 0 10px rgba(0, 0, 0, .6); }
<!-- 設置表格單元格邊框 --> table.responsive th,table.responsive td{ border: 1px solid #666666; padding: .5em 1em; }
<!-- 設置表頭顏色 --> table.responsive th{ background: #35B558; }
<!-- 設置超鏈接格式 --> table.responsive .actions a{ color: #ff5c00;
<!-- 設置超鏈接字體沒有下划線 --> text-decoration: none; padding: 0 4px; } table.responsive .number,table.responsive .actions{ text-align: center; }
<!-- 捕捉瀏覽器寬度最大為480px時觸發以下css樣式 --> @media (max-width: 480px) {
<!-- 清除其它寬度下所設置的表格樣式 --> table.responsive{ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; }
<!-- 隱藏表頭（這里的隱藏與visiblity隱藏不同，這里的隱藏將不會為隱藏部分留下空白位置，而visiblity會為隱藏部分留下空白位置） --> table.responsive thead{ display: none; }
<!-- 將所有表格變成塊級元素，以使表格獨行顯示 --> table.responsive td{ display: block; border: none; }
<!-- 設置第一例左對齊並添加顏色 --> table.responsive .number{ text-align: left; background: #35B558; }
<!-- 在第一例文字前面添加文字 --> table.responsive .number:before{ content: '課程序號';
<!-- 在此處設置padding是避免設置number為相對路徑 --> padding-right: 20px; font-weight: bold; } table.responsive .name:before{ content: '課程名稱'; padding-right: 20px; font-weight: bold; }
<!-- 設置相對路徑，以便子元素使用絕對路徑 --> table.responsive tr{ position: relative; }
<!-- 通過絕對路徑設置修改刪除在第一行：
因number的position值為static，所以number會在tr容器的第一行，
這里修改刪除通過絕對路徑，設置距tr容器上面0px，則修改刪除也會出現在tr容器第一行，這里一定要設置tr位置為相對路徑 --> table.responsive .actions{ position: absolute; right: 0; top: 0; } }
注意：由以上代碼可以知道，使用position：absolute必須在其父元素中設置position：relative