posts - 82, comments - 269, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理
FROM:http://blog.doyoe.com/article.asp?id=160

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>test</title>
<meta name="Author" content="Doyoe(飘零雾雨), edzmaster@gmail.com" />
<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="测试">
<thead>
 <tr>
  <th class="col1"><strong>产品名称</strong></th>
  <th class="col2"><strong>产品介绍</strong></th>
  <th class="col3"><strong>产品备注</strong></th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</td>
  <td>优雅Q400N,2007年7月上市,采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
  <td>迅驰4平台,突出的性价比,漂亮的外观</td>
 </tr>
</tbody>
</table>
</body>
</html>

评论

# re: 表格固定宽度的demo-不换行,自动的隐藏多余的内容。  回复  更多评论   

2008-03-21 13:54 by yes ppg
主要是
td {white-space:nowrap;overflow:hidden;}
这段CSS的作用吧

# re: 表格固定宽度的demo-不换行,自动的隐藏多余的内容。  回复  更多评论   

2010-12-27 17:53 by cluo
关键代码:table {width:500px;table-layout:fixed;}
tr td {white-space:nowrap;overflow:hidden;}

# re: 表格固定宽度的demo-不换行,自动的隐藏多余的内容。  回复  更多评论   

2014-11-10 10:47 by 是短发
阿萨德飞规划局合格

只有注册用户登录后才能发表评论。


网站导航: