首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

怎么使表格内的单td列宽度固定,且表格总体带滚动条

2012-06-24 
如何使表格内的单td列宽度固定,且表格总体带滚动条?HTML code!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1

如何使表格内的单td列宽度固定,且表格总体带滚动条?

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><div class="view-content">  <table class="views-table cols-2">    <thead>      <tr>        <th class="views-field views-field-title"> 姓名 </th>        <th class="views-field views-field-field-xingbie-value"> 性别 </th>        <th class="views-field views-field-field-nianling-value"> 年龄 </th>        <th class="views-field views-field-field-shouji-value"> 手机 </th>        <th class="views-field views-field-field-guhua-value"> 固话 </th>        <th class="views-field views-field-field-emailqq-value"> 联系E-mail/QQ </th>        <th class="views-field views-field-field-jiguan-value"> 籍贯 </th>        <th class="views-field views-field-field-loupanmingcheng-value"> 楼盘名称 </th>        <th class="views-field views-field-field-yigouhuxing-value"> 已购户型 </th>        <th class="views-field views-field-field-zhiyechanquqn-value"> 置业产权 </th>        <th class="views-field views-field-field-goufangshijian-value"> 购房时间 </th>        <th class="views-field views-field-field-goumaijiage-value"> 购买价格 </th>        <th class="views-field views-field-field-zhiyemudi-value"> 置业目的 </th>        <th class="views-field views-field-field-xiaochanquanliaojie-value"> 对小产权房的了解 </th>        <th class="views-field views-field-field-yewuyuan-value"> 业务员 </th>        <th class="views-field views-field-field-zhiyeguwen-value"> 置业顾问 </th>        <th class="views-field views-field-field-kehuleibie-value"> 客户类别 </th>        <th class="views-field views-field-field-kehulaiyuan-value"> 客户来源 </th>        <th class="views-field views-field-field-goufangdizhi-value"> 购房地址 </th>        <th class="views-field views-field-field-laiziquyu-value"> 客户来自区域 </th>        <th class="views-field views-field-field-yigoumianji-value"> 已购面积 </th>        <th class="views-field views-field-field-kehufangtan-value"> 客户访谈 </th>      </tr>    </thead>    <tbody>      <tr class="odd views-row-first">        <td class="views-field views-field-title"><a href="/node/24">张三</a></td>        <td class="views-field views-field-field-xingbie-value"> 男 </td>        <td class="views-field views-field-field-nianling-value"> 33 </td>        <td class="views-field views-field-field-shouji-value"> 33334444222 </td>        <td class="views-field views-field-field-guhua-value"> 010-231456 </td>        <td class="views-field views-field-field-emailqq-value"> afsd@sf.com </td>        <td class="views-field views-field-field-jiguan-value"> sdf测试测试测试测试测试测试测试测试测... </td>        <td class="views-field views-field-field-loupanmingcheng-value"> 试验楼盘2 </td>        <td class="views-field views-field-field-yigouhuxing-value"> 一房一厅 </td>        <td class="views-field views-field-field-zhiyechanquqn-value"> 小产权房 </td>        <td class="views-field views-field-field-goufangshijian-value"><span class="date-display-single">2011-04-07</span></td>        <td class="views-field views-field-field-goumaijiage-value"> 15000.00万元 </td>        <td class="views-field views-field-field-zhiyemudi-value"> 自住+投资 </td>        <td class="views-field views-field-field-xiaochanquanliaojie-value"> 了解 </td>        <td class="views-field views-field-field-yewuyuan-value"> 业务员李四 </td>        <td class="views-field views-field-field-zhiyeguwen-value"> 顾问李四 </td>        <td class="views-field views-field-field-kehuleibie-value"> 测试测试测试测试测试测试测试测试测试测试... </td>        <td class="views-field views-field-field-kehulaiyuan-value"> 客户介绍 </td>        <td class="views-field views-field-field-goufangdizhi-value"> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试... </td>        <td class="views-field views-field-field-laiziquyu-value"> 测试测试测试测试测试测试测试测试测试测试... </td>        <td class="views-field views-field-field-yigoumianji-value"> 100 m2 </td>        <td class="views-field views-field-field-kehufangtan-value"> 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试... </td>      </tr>      <tr class="even views-row-last">        <td class="views-field views-field-title"><a href="/node/23">新客户</a></td>        <td class="views-field views-field-field-xingbie-value"> 女 </td>        <td class="views-field views-field-field-nianling-value"></td>        <td class="views-field views-field-field-shouji-value"> 22222222111 </td>        <td class="views-field views-field-field-guhua-value"></td>        <td class="views-field views-field-field-emailqq-value"></td>        <td class="views-field views-field-field-jiguan-value"></td>        <td class="views-field views-field-field-loupanmingcheng-value"> 试验楼盘2 </td>        <td class="views-field views-field-field-yigouhuxing-value"></td>        <td class="views-field views-field-field-zhiyechanquqn-value"></td>        <td class="views-field views-field-field-goufangshijian-value"><span class="date-display-single">2011-04-07</span></td>        <td class="views-field views-field-field-goumaijiage-value"></td>        <td class="views-field views-field-field-zhiyemudi-value"> 暂无调查 </td>        <td class="views-field views-field-field-xiaochanquanliaojie-value"> 暂无调查 </td>        <td class="views-field views-field-field-yewuyuan-value"></td>        <td class="views-field views-field-field-zhiyeguwen-value"></td>        <td class="views-field views-field-field-kehuleibie-value"></td>        <td class="views-field views-field-field-kehulaiyuan-value"> 暂无调查 </td>        <td class="views-field views-field-field-goufangdizhi-value"></td>        <td class="views-field views-field-field-laiziquyu-value"></td>        <td class="views-field views-field-field-yigoumianji-value"></td>        <td class="views-field views-field-field-kehufangtan-value"></td>      </tr>    </tbody>  </table></div></body></html> 



现在模样:http://hiphotos.baidu.com/xhetao/pic/item/5730c6597fdfb24f377abe36.jpg
想实现的模样:http://hiphotos.baidu.com/xhetao/pic/item/456fdb3cb37f86e0d1a2d3ed.jpg
实现每个列宽度是固定的。并且当横向长度很长时带滚动条。
当横向不是很长时,不带滑动条。
如,td的个数不确定。有时多,有时少。当设td的宽度都为200px。当宽度大于屏幕宽度时,加滑动条。当宽度小于屏幕宽度时,不加滑动条。

只用css能实现吗?有这样的jquery插件吗?怎样用css来实现

[解决办法]
呵呵,你好,你留下邮箱,我发一个demo给你

[解决办法]
给外边的DIV设定宽度和overflow:auto,大于你设的宽度时,它会自动显出来滚动条
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <style type="text/css">        table{border-collapse:collapse;width:500px;}        th,td{border:1px solid #c0c0c0;text-align:center;width:80px;}        #test{width:400px;overflow:auto;}    </style></head><body>    <div id="test">      <table>        <thead>          <tr>            <th>编号</th>            <th>姓名</th>            <th>年龄</th>            <th>职业</th>            <th>语言</th>            <th>工作年限</th>          </tr>        </thead>        <tbody>          <tr>            <td>1</td>            <td>张三</td>            <td>20</td>            <td>程序员</td>             <td>Java</td>             <td>1年</td>          </tr>          <tr>            <td>2</td>            <td>李四</td>            <td>25</td>            <td>程序员</td>            <td>.Net</td>            <td>3年</td>          </tr>        </tbody>      </table>  </div></body></html>
[解决办法]
hi,我已经发给你了。
探讨

引用:

呵呵,你好,你留下邮箱,我发一个demo给你
bbc177@qq.com
谢谢。

热点排行