table:設置邊距,td內容過長用省略號代替
1.table:設置邊距
合並表格邊框border-collapse: collapse，然后用th，td的padding設置內容和邊框之間的空隙padding。
2.td內容過長用省略號代替
在table中必須設置style:table-layout: fixed;這條屬性就是讓table的內部布局固定大小。這個時候就用width屬性調節td的長度。之后在添加如下：td {white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .card{ 8 background-color: white; 9 margin-top: 10px; 10 border-top: 1px solid #B5B5B5; 11 border-bottom: 1px solid #B5B5B5; 12 padding: 5px; 13 } 14 15 table { 16 /*合並表格邊框*/ 17 border-collapse: collapse; 18 /*讓table的內部布局固定大小*/ 19 table-layout: fixed; 20 /*設置寬度*/ 21 width:100%; 22 } 23 td { 24 /*設置邊距*/ 25 padding: 3px 10px 3px 0px; 26 /*規定段落中的文本不進行換行*/ 27 white-space:nowrap; 28 /*關閉滾動條*/ 29 overflow:hidden; 30 /*溢出的文字顯示為省略號*/ 31 text-overflow: ellipsis; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="card"> 37 <table border="0"> 38 <tr> 39 <td style="text-align: right;width:30%;">請求類型:</td> 40 <td style="width:70%;">維修</td></tr> 41 <tr style="font-size: 12px;"> 42 <td style="text-align: right;">用戶姓名:</td> 43 <td>張小三張小三張小三張小三張小三張小三張小三張小三張小三張小三張小三張小三</td> 44 </tr> 45 <tr style="font-size: 12px;"> 46 <td style="text-align: right;">聯系電話:</td> 47 <td>135********</td> 48 </tr> 49 <tr style="font-size: 12px;"> 50 <td style="text-align: right;">創建時間:</td> 51 <td>2016年4月23日 16:30</td> 52 </tr> 53 </table> 54 </div> 55 </body> 56 </html>
顯示結果:
