CSS table-layout 屬性
阿新 • • 發佈:2018-12-30
http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp
應用:(1)單元格內容過長隱藏用省略號代替
<html> <head> <title></title> <style type="text/css"> #myTable { width: 400px; table-layout: fixed; /* 在固定表格佈局中,水平佈局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距,而與單元格的內容無關 */ } #myTable td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <table id="myTable"> <tr> <td>你是天底下最不聰明的人</td> <td>這是一個很寬的表格,我不喜歡讓它全部顯示哦,你懂不懂呀</td> </tr> </table> </body> </html>
應用:(2)單元格內容過長,自動換行
<html> <head> <title></title> <style type="text/css"> #myTable { width: 400px; table-layout: fixed; /* 在固定表格佈局中,水平佈局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距,而與單元格的內容無關 */ } #myTable td { word-wrap:break_word } </style> </head> <body> <table id="myTable"> <tr><th>專案</th><th>內容</th></tr> <tr> <td>你是天底下最不聰明的人</td> <td>這是一個很寬的表格,我不喜歡讓它全部顯示哦,你懂不懂呀</td> </tr> </table> </body> </html>