HTML里面如何实现表格的自动换行

html-css06

HTML里面如何实现表格的自动换行,第1张

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、在index.html中的<body>标签中,将外层的table改为div,新增css代码:div {width: 300px} table {float: left}。

3、浏览器运行index.html页面,此时表格们实现了每3个自动换行。

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>