也可以使用css来实现,CSS控制Table单元格强制换行与强制不换行 。
用CSS实现Table单元格数据自动换行或不换行的实现方法如下:
1、强制换行:
1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
.AutoNewline
{
Word-break: break-all/*必须*/
}
</style>
<table>
<tr>
<td class="AutoNewline">自动换行</td>
</tr>
</table>
2、强制不换行:
1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
.NoNewline
{
word-break: keep-all/*必须*/
}
</style>
<table>
<tr>
<td class="NoNewline">不换行</td>
</tr>
用float属性让table和img左右浮动<div>
<table border="1" cellpadding="5" cellspacing="0" style="border:2px #000 solidborder-
collapse:collapsefloat:left">
<tr>
<td>sdfsd</td>
<td>sdf</td>
<td>sdfsd</td>
</tr>
<tr>
<td>sdfsd</td>
<td>sdf</td>
<td>sdfsd</td>
</tr>
</table>
<div style="float:right"><img src="file:///C|/Documents and Settings/Administrator/桌面/2123.png" width="183" height="75" /></div>
</div>
使用
word-wrap:break-word
word-break:break-all
来解决
直接上代码
<!DOCTYPE html><html>
<head>
<title></title>
<style type="text/css">
table{
width: 500px
border-top:1px solid #ddd
border-left:1px solid #ddd
}
td{
word-wrap:break-word
word-break:break-all
width: 100px
border-right:1px solid #ddd
border-bottom:1px solid #ddd
}
</style>
</head>
<body>
<table>
<tr>
<td>F6746,F6746,F6746,F6746,F6746,F6746,F6746,F6746,F6746,F6746,F6746,F6746,F6746</td>
<td>asdfaweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeesdwefsdffsdfwe</td>
<td>测试换行的中文展示形式测,试换行的中文展示形式测试换行的中,文展示形式测试换行的中文展示形式测试换,行的中文展示形式</td>
<td>just wait a minute,just wait a minute,just wait a minute,just wait a minute,just wait a minute,just wait a minute</td>
</tr>
</table>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)