代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.ta{
border-collapse: collapse;
border-color: blue;
table-layout:fixed;
width: 100%;
}
td{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<table class="ta" border="1" cellpadding="5" >
<tr>
<td>1111111111111111111111111111</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
运行结果如下：
注意：td里的属性如下几个是至关重要的
white-space: nowrap; 设置内容抵达容器边界会不会转到下一行
overflow: hidden; 不显示超过对象尺寸的内容,也就是说设置td里面的数据无论有多少，都不会换行
text-overflow: ellipsis; 将被隐藏的那部分用省略号代替。
同样
注意：table里的table-layout: fixed 是固定布局的算法。
在这种算法中，表格和列的宽度取决于col对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度； 假如表格没有指定宽度( width )属性，则表格被呈递的默认宽度为 100%