表格固定宽度的demo-不换行,自动的隐藏多余的内容。

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(飘零雾雨), [email protected]" />
<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>

你可能感兴趣的:(表格固定宽度的demo-不换行,自动的隐藏多余的内容。)