如何用CSS控制表格每列的宽度，宽度设置用的百分比，超出的字不换行，用...显示，求解

html-css015

如何用CSS控制表格每列的宽度，宽度设置用的百分比，超出的字不换行，用...显示，求解,第1张

如果是简单的表格，直上直下没有跨列或者跨行的：

td

{

text-overflow

:ellipsis

white-space

:nowrap

overflow:hidden

}

/*

设置不换行

省略号

显示*/

然后只需要再给第一行的td分别加上class，例如：

<tr>

<td

class="item1">单元格</td>

<td

class="item2">单元格</td>

<td

class="item3">单元格</td>

<td

class="item4">单元格</td>

<td

class="item5">单元格</td>

<td

class="item6">单元格</td>

</tr>

然后，分别设置宽度

.item1

{

width:20%

}

....

.item6

{

width:5%

}

其他行同列的单元格会被撑开

比较复杂的有跨列或者跨行的表格，设置方法类似，但是就是要计算一下，比较麻烦。

只能做到固定宽度不显示，字数控制不了，除非你固定字体大小。

<!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>DIV+CSS表格效果</title> 

<style type="text/css"> 

* {margin:0padding:0} 

#main {margin:100px 0 0 200px} 

#main ul {width:520pxheight:165pxlist-style:none} 

#main li {border-left:1px solid #cccborder-top:1px solid #cccfloat:leftwidth:102pxheight:33pxtext-align:centerline-height:33pxtext-overflow: ellipsis 

overflow: hidden white-space: nowrap } 

#main li.b {border-bottom:1px solid #ccc} 

#main li.r {border-right:1px solid #ccc} 

</style> 

</head> 

<body> 

<div id="main"> 

<ul> 

<li>11</li> 

<li>11</li> 

<li>11</li> 

<li>11</li> 

<li class="r">11</li> 

<li >测试超过内容显示不显示哦。测试超过内容显示不显示哦。测试超过内容显示不显示哦。测试超过内容显示不显示哦。测试超过内容显示不显示哦。测试超过内容显示不显示哦。</li> 

<li>还行吧？</li> 

<li></li> 

<li></li> 

<li class="r">11</li> 

<li>上海世博</li> 

<li></li> 

<li></li> 

<li></li> 

<li class="r">11</li> 

<li></li> 

<li></li> 

<li></li> 

<li></li> 

<li class="r">11</li> 

<li class="b">生活更美好</li> 

<li class="b"></li> 

<li class="b"></li> 

<li class="b"></li> 

<li class="b r">11</li> 

</ul> 

</div> 

</body> 

</html>

对图片设置：

max-height:500px

max-width:500px

或者你设置单元格div 或者 overflow:hidden

<div id="img" style="height: 600pxwidth: 1000pxoverflow:auto">

<img scr="" />

</div>