html语言中table表格内怎么换行

html语言中table表格内怎么换行,第1张

html语言当中,<p>标签 或者是<br/>都可以实现table表格内换行

也可以使用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>测试换行的中文展示形式</td>

<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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7245990.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存