1. 給table加邊框
table{ border-collapse: collapse; /*表格的邊框合並為一個單一的邊框*/ } table, table tr th, table tr td { border:1px solid #ccc; }
還有種傻傻的方法：
table{ border-top:1px solid #ccc; border-left:1px solid #ccc; } table tr td, table tr th{ border-right:1px solid #ccc; border-bottom: 1px solid #ccc; }
2.給table的th固定寬度
① 設置table的寬度
② table設置table-layout : fixed ;
③ 設置th寬度
3.給table加滾動條
在table外包一層div，div設置overflow屬性
div{ overflow-x: scroll;
}
4.給td加滾動條
在td里加一層div，div寬度100%，且設置overflow屬性
5.td里嵌套table，且table有滾動條
① 最外層的table加上寬度、table-layout:fixed;word-break:break-all;（防止內層的table內容過長，將外層td撐開）
②在td和第二層table之間，加一層div;div設置overflow屬性，再給內層table的th設置寬度就行了，
6.隱藏滾動條
.classname :: -webkit-scrollbar{ display:none; }
7.如下圖，th在左側，右側td，第一行的td設置了colspan=“8”，使用了colspan后，設置列寬(th/td的寬度)不生效：
解決辦法：添加colgroup屬性，col設置列的寬度。（若td設置了colspan,且colgroup設置了col的寬度，但ie下寬度仍不生效，記得：table加上樣式table-layout : fixed ;）
<colgroup>
<col width = '20%'>
<col width = '10%'>
<col width = '10%'>
<col width = '10%'>
<col width = '10%'>
<col width = '10%'>
<col width = '10%'>
<col width = '10%'>
<col width = '10%'>
</colgroup>
8. 設置td的內容超出部分以省略號顯示（title屬性展示完整數據）
table tr td { overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
}
（若不生效，給 table 設置寬度和table-layout : fixed ;）
table table td{ overflow:hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:break-all;
}
9. 兼容問題：ie9下，表格出現空格以及錯位。
如圖：第一行的操作人右移了，出現了空格。
解決辦法： 網上查，這是ie9的一個bug， </td>與<td>間有空行時會發生錯位。所以，去除掉td標簽內的空格。
10. tr之間出現空白行
如圖：我在用字符串拼接，生成表結構的時候，發現渲染出的表結構tr之間有空行
var html ='<tr><th>名稱</th><td>內容</td><th>名稱</th><td>內容</td></tr>'; $('tbody').append(html);
檢查發現：坑啊，結束標志寫錯了，</tr>寫錯成了<tr/>，記錄下來，不知道有沒有人和我一起犯蠢。
11. td 在ie瀏覽器里 沒有邊框，谷歌瀏覽器正常
檢查發現，td設置了相對定位position:relative,在ie下有兼容問題，
解決：設置background-clip屬性（規定背景的繪制區域） -----> 
table tr td {
padding: 0px;
height: 40px;
position: relative;
background-clip: padding-box;
}
12. 多行多列的表頭thead固定
效果圖：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>多行多列的表頭固定</title> <style> #app{ max-width: 400px; margin: 20px auto; overflow: hidden; } .head-list{ overflow: hidden; /*隱藏thead多余內容和滾動條*/ } .body-list{ overflow: auto; max-height: 100px; min-height: 0%; /* 設置了overflow：auto，在ie9可能會有兼容問題：在td里的input輸入內容時，div的高度會增大 */ } .head-list table{ border-bottom: 0 none; } table{ border: 1px solid #e7e7e7; border-collapse: collapse; table-layout: fixed; font-size: 12px; color: #666; width: 700px; } thead tr { background-color: #f2f2f2; height: 45px; } thead .secondTr th{ width: 100px; /* 7*100 大於總寬度400 */ border-bottom: 0 none; } th,td{ border: 1px solid #e7e7e7; text-align: center; box-sizing: border-box; } table tbody tr td { width: 100px; padding: 15px 0px; } </style> </head> <body> <div id="app"> <div class="head-list"> <table> <thead> <tr> <th colspan="2">水果</th> <th colspan="3">人名</th> <th colspan="2">玩具</th> </tr> <tr class="secondTr"> <th>蘋果</th> <th>香蕉</th> <th>Jay</th> <th>Lucy</th> <th>Nick</th> <th>小汽車</th> <th>娃娃</th> </tr> </thead> </table> </div> <div class="body-list"> <table> <tr> <td>2個</td> <td>2個</td> <td>2個</td> <td>2個</td> <td>2個</td> <td>2個</td> <td>2個</td> </tr> <tr> <td>3個</td> <td>3個</td> <td>3個</td> <td>3個</td> <td>3個</td> <td>3個</td> <td>3個</td> </tr> <tr> <td>4個</td> <td>4個</td> <td>4個</td> <td>4個</td> <td>4個</td> <td>4個</td> <td>4個</td> </tr> <tr> <td>5個</td> <td>5個</td> <td>5個</td> <td>5個</td> <td>5個</td> <td>5個</td> <td>5個</td> </tr> </table> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> // 不加js的情況下，此時頁面tbody已經出現橫縱滾動條，但在滾動橫向滾動條時，表頭不動（見圖1）。所以要設置一個scroll事件，讓表頭隨着表體滾動 $('.body-list').on('scroll', function () { $(".head-list").scrollLeft($('.body-list').scrollLeft()); }); var divHeight = $(".body-list").height(); var tableHeight = $(".body-list table").height(); // 出現縱向滾動條時，給表頭div添加margin樣式(略丑，但是不加margin，會導致橫向條滾到最右，上下表格發生錯位，見圖2) if(tableHeight > divHeight){ $(".head-list").css('margin-right','17px'); } </script> </body> </html>
圖1：
圖2：
