CSS實現table固定寬度，超過單元格部分內容省略
阿新 • • 發佈：2017-10-09
效果 org lips cell 間距 tex round nal 長度
<table>單元格的寬度是根據內容的大小自適應的，沒有內容的地方就擠到了一起。需要固定表格寬度和每一列的寬度。
table-layout:fixed
在固定表格布局中，水平布局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。
white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
超過指定長度的文本以省略號的形式顯示。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>test</title> 6 <style> 7 * { 8 padding: 0; 9 margin: 0; 10 } 11 table { 12 width: 300px; 13 table-layout:fixed; 14 } 15 .first_col { 16 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 17 width: 150px; 18 } 19 .first_col_text { 20 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 21 color: red; 22 width: 120px; 23 float: left; 24 25 } 26 img{ 27 width: 20px; 28 height: 20px; 29 float: right; 30 margin-right: 5px; 31 } 32 .second_col { 33 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 34 width: 100px; 35 } 36 .third_col{ 37 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 38 width: 50px; 39 } 40 </style> 41 </head> 42 <body> 43 <table border="1" cellspacing="0" cellpadding="0"> 44 <tr> 45 <td class="first_col"> 46 <div class="first_col_text">123456789012345</div> 47 <img src="http://tb2.bdstatic.com/tb/editor/images/face/i_f23.png?t=20131111"> 48 </td> 49 <td class="second_col">12345678901234567890123456789012345678901234567890</td> 50 <td class="third_col">1</td> 51 </tr> 52 <tr> 53 <td class="first_col"></td> 54 <td class="second_col"></td> 55 <td class="third_col">12345678901234567890123456789012345678901234567890123456789012345678901234567890</td> 56 </tr> 57 <tr> 58 <td class="first_col">123456789012345</td> 59 <td class="second_col"></td> 60 <td class="third_col"></td> 61 </tr> 62 </table> 63 </body> 64 </html>
顯示效果：
CSS實現table固定寬度，超過單元格部分內容省略