<table>單元格的寬度是根據內容的大小自適應的，沒有內容的地方就擠到了一起。需要固定表格寬度和每一列的寬度。
table-layout:fixed
在固定表格布局中，水平布局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。
white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
超過指定長度的文本以省略號的形式顯示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <style> * { padding: 0; margin: 0; } table { width: 300px; table-layout:fixed; } .first_col { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 150px; } .first_col_text { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: inline-block; color: red; width: 120px; } img { width: 20px; height: 20px; margin-right: 5px; } .second_col { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; } .third_col{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 50px; } </style> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr> <td class="first_col"> <span class="first_col_text">123456789012345</span> <img src="http://tb2.bdstatic.com/tb/editor/images/face/i_f23.png?t=20131111"> </td> <td class="second_col">12345678901234567890123456789012345678901234567890</td> <td class="third_col">1</td> </tr> <tr> <td class="first_col"></td> <td class="second_col"></td> <td class="third_col">12345678901234567890123456789012345678901234567890123456789012345678901234567890</td> </tr> <tr> <td class="first_col">123456789012345</td> <td class="second_col"></td> <td class="third_col"></td> </tr> </table> </body> </html>
顯示效果：
