CSS の table-layout 属性は何をするのでしょうか?テーブルの2つのレイアウト方法の紹介（コード例）-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS の table-layout 属性は何をするのでしょうか?テーブルの2つのレイアウト方法の紹介（コード例）

青灯夜游

Sep 15, 2018 am 11:45 AM

css

フロントエンド Web ページの開発では、ページ全体の記述を素早く完了するために、いくつかの CSS レイアウト手法がよく使用されます。 CSS のレイアウト方法は数多くありますが、テーブルレイアウトもその 1 つです。今回はテーブルレイアウトのcss table-layout属性について説明し、テーブルの2つのレイアウト方法を紹介します。困っている友人は参考にしていただければ幸いです。

1. テーブルレイアウト属性とは何ですか?

#1. 定義

table-layout 属性は、テーブルのセル、行、列のアルゴリズムルールを表示するために使用されます

#2。 ##

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

automatic (自動): (デフォルト値) 列の幅はセルの内容によって設定されます;

fixed: 列の幅はテーブルの幅と列の幅によって設定されます。指定された table-layout 属性の値は、親要素から継承される必要があります。

3.table-layout 属性の説明

この属性は、テーブルレイアウトを完成させるために使用されるレイアウトアルゴリズムを指定します。

固定レイアウト (固定) アルゴリズムは高速ですが、あまり柔軟性がありません。
自動レイアウト (自動) アルゴリズムは低速ですが、従来の HTML テーブルをより反映します。
注:
すべてのブラウザは table-layout 属性をサポートしていますが、Internet Explorer (IE8 を含む) のどのバージョンでも属性値「inherit」はサポートされていません。！！

2. 2 つのレイアウト方法 (自動レイアウトと固定レイアウト) の紹介

1. 自動レイアウト (auto)

自動レイアウトでは、列の幅は折り返されずに列セル内の最も幅の広いコンテンツによって設定されるため、セルの幅の設定は無効です。

自動レイアウトアルゴリズムは、最終的なレイアウトを決定する前にテーブルのすべてのコンテンツにアクセスする必要があるため、速度が遅くなる場合があります。

コード例:

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

レンダリング:

##上の図に示すように: 自動レイアウトでは、td タグ幅と高さは、td タグ内のコンテンツの量に応じて変化します。

2. 固定レイアウト (固定)

CSS の table-layout 属性は何をするのでしょうか?テーブルの2つのレイアウト方法の紹介（コード例）自動レイアウトと比較して、固定レイアウトでは、水平レイアウトは表の幅、列の幅、表の境界線のみに依存します。幅、セル間隔、セルの内容に関係なく、固定テーブルレイアウトを使用することで、ユーザーエージェントは最初の行を受信するとすぐにテーブルを表示できます。

コード例:

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

レンダリング:

##上の図からわかるように、テーブルの幅を設定します。 500px を超えると、テーブル内の 2 つの TD ラベル (セル) の幅が自動的に均等に分割され、最初の TD ラベル (セル) の幅を超えた内容は 2 番目の TD ラベル (セル) にオーバーフローします。

固定レイアウトの場合、tdラベル(セル)の幅については

2点説明します

: CSS の table-layout 属性は何をするのでしょうか?テーブルの2つのレイアウト方法の紹介（コード例）