<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>
显示效果：
