table中只规定列的百分比,而不具体给px值,用以下样式
table{
//固定布局的算法。在这种算法中,表格和列的宽度取决于col对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度。 假如表格没有指定宽度( width )属性,则表格被呈递的默认宽度为 100% (注意:此样式是关键)
table-layout: fixed;
}
.ellipsis{
//设置内容抵达容器边界会不会转到下一行
white-space: nowrap;
//不显示超过对象尺寸的内容(这个绝对不能少),也就是说设置td里面的数据无论有多少,都不会换行
overflow: hidden;
//将被隐藏的那部分用省略号代替。
text-overflow: ellipsis;
}
<table>
<thead>
<th width="50%">
一
</th>
<th width="25%">
二
</th>
<th width="25%">
三
</th>
</thead>
<tbody>
<tr>
<td class="ellipsis">
很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多
</td>
<td>
正常
</td>
<td>
正常
</td>
</tr>
</tbody>
</table>