账号通
    

账号  

密码  

7987

查看

1

回复
主题:CSS之表格的列自适应内容(列内容不换行) [收藏主题]  
rickson 当前离线

204

主题

0

广播

0

粉丝
添加关注
级别:二年级

用户积分:1621 分
登录次数:44 次
注册时间:2006/7/21
最后登录:2017/2/25
rickson 发表于:2007/11/23 12:14:00   | 只看该作者 查看该作者主题 楼主 
做在线知识付费 选科汛云开店
让表格的列自适应内容(列内容不换行)

确保表格列的数据不换行的问题的解决办法:
1、直接在每一列中加上<nobr>,例如:<td><nobr>测试</td>。
2、修改CSS文件,在TD的属性中加上white-space:nowrap就可以了(这种方法会保证所有的列的数据都不换行),如修改单行的代码可以是<td style="white-space:nowrap">内容</td>。
3、增加一个CSS属性,用于限制新的TD,这样需要在调用TD的时候指定class就可以了。
以下为两种情况的图示:
1)增加<nobr>或者CSS属性前

此主题相关图片如下:070306134024.jpg
070306134024.jpg
2)修改后的效果

此主题相关图片如下:070306134121.jpg
070306134121.jpg

各种方法的优劣性:
1、需要修改所有的无须换行的列。
2、简单但是如果需要换行的列较多的话修改也会比较烦琐。
3、简单而且不会导致全局修改的问题。
【补充】如何让表格自动换行呢?只要给td加上style="word-break: break-all;word-wrap: break-word;"样式即可。
代码演示:
<title>确保列的数据不换行 BY:rickson</title>
<!-- 在CSS中修改 td { word-wrap:break-word;white-space:nowrap} 可以保证所有列的数据都不会换行-->
<style type="text/css">
<!--
a   { text-decoration: none; color: #003366 }
a:hover   { text-decoration: underline }
body   { scrollbar-base-color: #F8F8F8; scrollbar-arrow-color: #698CC3; font-size: 12px; background-color: #ffffff }
table   { font: 12px Tahoma, Verdana; color: #000000 }
td        { word-wrap:break-word;}
input,select,textarea { font: 11px Tahoma, Verdana; color: #000000; font-weight: normal; background-color: #F8F8F8 }
select   { font: 11px Arial, Tahoma; color: #000000; font-weight: normal; background-color: #F8F8F8 }
.nav   { font: 12px Tahoma, Verdana; color: #000000; font-weight: bold }
.nav a   { color: #000000 }
.header   { font: 11px Tahoma, Verdana; color: #FFFFFF; font-weight: bold; background-color: #698CC3 }
.header a  { color: #FFFFFF }
.category  { font: 11px Arial, Tahoma; color: #000000; background-color: #EFEFEF }
.tableborder  { background: #D6E0EF; border: 1px solid #698CC3 }
.singleborder  { font-size: 0px; line-height: 1px; padding: 0px; background-color: #F8F8F8 }
.smalltxt  { font: 11px Arial, Tahoma }
.outertxt  { font: 12px Tahoma, Verdana; color: #000000 }
.outertxt a  { color: #000000 }
.bold   { font-weight: bold }
.altbg1   { background: #F8F8F8 }
.altbg2   { background: #FFFFFF }
.click{background-color: #336699;color:#ffffff;}
.spancn{
  background:#FFFFFF;
  border:0px;
}
-->
</style>
<br>
<font color="red">没有添加标志以前</font>
<table class=tableborder width="20%">
<tr class="category">
  <td>管理</td>
  <td>控制</td>
  <td>编号</td>
  <td>方式</td>
  </tr>
<tr class="altbg2">
  <td>长字符显示会变成多行</td>
  <td>控制者列表为多个字符</td>
  <td>001</td>
  <td>长字符显示</td>
  </tr>
</table>
<br><br>
<font color="red">添加标志以后</font>
<table class=tableborder width="20%">
<tr class="category">
  <td>管理</td>
  <td>控制</td>
  <td><nobr>编号</td>
  <td>方式</td>
  </tr>
<tr class="altbg2">
  <td><nobr>长字符显示会变成多行</td>
  <td><nobr>控制者列表为多个字符</td>
  <td><nobr>001</td>
  <td><nobr>长字符显示</td>
  </tr>
</table>



[此贴子已经被作者于2007-11-23 12:14:57编辑过]

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
rickson 当前离线

204

主题

0

广播

0

粉丝
添加关注
级别:二年级

用户积分:1621 分
登录次数:44 次
注册时间:2006/7/21
最后登录:2017/2/25
rickson 发表于:2007/11/23 13:14:00   | 只看该作者 查看该作者主题 沙发 
科汛在线商城系统(NET)
<html>
<head>
<title>正在载入...</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">
<tr>
<form name=loading>
<td align=center>
<p><font color=gray>正在载入首页,请稍候.......</font></p>
<p>
<input type=text name=chart size=46 style="font-family:Arial;
font-weight:bolder; color:gray;
background-color:white; padding:0px; border-style:none;">
<br>
<input type=text name=percent size=46 style="font-family:Arial;
color:gray; text-align:center;
border-width:medium; border-style:none;">
<script>var bar = 0
var line = "||"
var amount ="||"
count()
function count(){
bar= bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count()",100);}
else
{window.location = "http://www.makewing.com/";}
}
</script>
</p>
</td>
</form>
</tr>
</table>
</body>
</html>
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.09497秒 powered by KesionCMS 9.0