What does the table-layout attribute in css do? Introduction to two layout methods of table (code examples)-CSS Tutorial-php.cn

What does the table-layout attribute in css do? Introduction to two layout methods of table (code examples)

青灯夜游

Release： 2018-09-15 11:45:36

Original

3106 people have browsed it

In the development of front-end web pages, in order to quickly complete the writing of the entire page, some CSS layout methods are often used. There are many CSS layout methods, and Table layout is one of them. Today we will explain the css table-layout attribute in Table layout and introduce the two layout methods of table. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. What is the table-layout attribute?

1. Definition

table-layout attribute is used to display the algorithm rules of table cells, rows, and columns

2. Usage

table-layout: automatic || fixed || inherit;

Copy after login

automatic (auto): (default value) column width is set by cell content;

fixed: column width is set by table width and column width;

inherit: specified The value of the table-layout attribute should be inherited from the parent element.

3.table-layout attribute description

This attribute specifies the layout algorithm used to complete table layout.
The fixed layout (fixed) algorithm is faster, but not very flexible.
The automatic layout (auto) algorithm is slower, but more reflective of traditional HTML tables.

Note:

All browsers support the table-layout attribute; but any version of Internet Explorer (including IE8) does not support the attribute value "inherit"! ! !

2. Introduction to two layout methods (automatic layout and fixed layout)

1. Automatic layout (auto)

In Auto Layout, the width of the column is set by the widest content in the column cell without wrapping, so setting the width of the cell is invalid.

The automatic layout algorithm is sometimes slower because it needs to access all the contents of the table before determining the final layout.

Code example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自动布局</title>
		<style>
			table.ex {table-layout: auto}
		</style>
	</head>

	<body>
		<table class="ex" border="1" width="100%">
			<tr>
				<td width="100px">td里的内容，我会全部显示:我是测试代码我是测试代码我是测试代码我是测试代码我是测试代码我是测试代码我是测试代码</td>
				<td width="100px">我是测试代码</td>
			</tr>
		</table>

	</body>

</html>

Copy after login

Rendering:

What does the table-layout attribute in css do? Introduction to two layout methods of table (code examples)

##As shown in the picture above: In automatic layout, the td tag The width and height will change depending on the amount of content in the td tag.

2. Fixed layout (fixed)

Compared with automatic layout, fixed layout allows the browser to layout the table faster; its horizontal layout only depends on the table width, column width, Table border width, cell spacing, regardless of cell content; by using a fixed table layout, the user agent can display the table as soon as the first row is received.

Code example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>固定布局</title>
		<style>
			table.ex {table-layout: fixed}
		</style>
	</head>
	<body>
		<table class="ex" border="1" width="500px">
			<tr>
				<td width="">1000000000000000000000000000000</td>
				<td width="">我是测试代码</td>
			</tr>
		</table>
	</body>
</html>

Copy after login

Rendering:

What does the table-layout attribute in css do? Introduction to two layout methods of table (code examples) ##As you can see from the picture above: Set the width of the table to After 500px, the width of the two td labels (cells) in the table is automatically divided equally, so that the content beyond the width of the first td label (cell) overflows to the second td label (cell).

In the fixed layout, there are

two points to explain about the width of the td label (cell)

Note:

Generally, if the content in the table is in Chinese, the text will automatically wrap if the content is too long. But if the content in the table is in English or numbers, if the content is too long, the text will float outside the cell, that is, the content will not wrap automatically. At this time, just use the attribute

word-wrap:break in css3 -word;

and word-break:break-all; are used together to solve the problem.

The above is the detailed content of What does the table-layout attribute in css do? Introduction to two layout methods of table (code examples). For more information, please follow other related articles on the PHP Chinese website!