本文介绍了一种使用HTML和CSS进行表格布局的方法，通过固定表格宽度并利用CSS样式控制单元格内容显示，实现内容过长时自动隐藏的效果。文章提供了一个具体的实例来说明如何设置表格的列宽以及如何避免单元格内容自动换行。
<html>
<head>
<style type="text/css">
td{
white-space:nowrap;text-overflow: ellipsis;overflow: hidden;
}
</style>
</head>
<body>
<table width="350px" border="1" cellspacing="0" cellpadding="0" style="table-layout:fixed;">
<colgroup>
<col style="width: 10%;"></col>
<col style="width: 10%;"></col>
<col style="width: 10%;"></col>
<col style="width: 10%;"></col>
<col style="width: 10%;"></col>
<col style="width: 10%;"></col>
<col style="width: 10%;"></col>
<col style="width: 10%;"></col>
<col style="width: 10%;"></col>
<!--可以用来分配列宽-->
</colgroup>
<tr>
<td width="200">注意:表格必须要设置宽度</td>
<td style="">超长的不希望换行而希望能自动隐藏的内容，超长的不希望换行而希望能自动隐藏的内容</td>
<td> </td>
</tr>
</table>
</body>
</html>
扫一扫
6157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
