分析する
単一行/複数行表示にはtable-layout: fixed;このプロパティが関係します。デフォルト状態のプロパティ値はauto(自動テーブル レイアウト) です。2 つの異なるプロパティ値の違いは次のとおりです。
方法
テーブルの内容を単一行/複数行表示に設定するときに使用する方法:
テーブルによって追加されたスタイル
table {
table-layout: fixed; /*后续设置单行、多行显示的基础*/
word-break: break-all; /*保证纯字母数字也能完全展示*/
}
この設定の効果:
- td が幅を設定しない場合、すべての列が均等に幅を共有します。
- すべての番号付きコンテンツとテキストコンテンツを完全に表示できます。
単一行の表示スタイル
tdにsingleLineのクラス名を設定する
.singleLine {
overflow: hidden;
white-space: nowrap; /*文本不换行*/
text-overflow: ellipsis; /*文本溢出时显示省略号*/
}
複数行の表示スタイル
tdにmultiLineのクラス名を設定する
.multiLine {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*设置显示的行数*/
-webkit-box-orient: vertical;
word-break: break-all; /*使连续的字母或数字能够在换行时拆分*/
}
効果
この設定の全体的な効果は次のとおりです。
-
以前に各列の幅が設定されていないテーブル
● 各列はテーブル全体の幅に均等に分割されます。
● デフォルトですべてのコンテンツが表示されます (行は折り返されますが、オーバーフローしません)。
● テーブルの幅は拡張されません。 -
各列の幅が事前に設定されている表
● 各列の幅が優先され、コンテンツがコンテンツを超える場合でも列は引き伸ばされません。
● デフォルトですべてのコンテンツが表示されます (行は折り返されますが、はみ出しません)。
● 幅テーブルの部分は伸びません。
欠陥
テストしたところ、この方法にはいくつかの欠点があることがわかりました。
- コンテンツを複数行で表示するために複数の隣接する TDS に CSS スタイルが設定されている場合、display: -webkit-box; このプロパティは全体のレイアウト スタイルを変更します。
- テーブルにパディング値がある場合、単一行表示は正常ですが、複数行表示では問題が発生します。
PS: テーブル コンテンツの 1 行/複数行の表示を設定するときに私が遭遇した問題はすべて、私の他の記事に記録されています。同様の問題に遭遇した教師がいる場合は、以下を参照してください。
テストコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
table td:nth-child(2) {
/* display:none; */
}
table.default {
table-layout: auto; /*默认值就是auto*/
}
table.fixed {
table-layout: fixed; /*后续设置单行、多行显示的基础*/
}
/* 方案测试 */
.test {
table-layout: fixed; /*后续设置单行、多行显示的基础*/
word-break: break-all; /*保证纯字母数字也能完全展示*/
}
.singleLine {
overflow: hidden;
white-space: nowrap; /*文本不换行*/
text-overflow: ellipsis; /*文本溢出时显示省略号*/
}
.multiLine {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*设置行数*/
-webkit-box-orient: vertical;
word-break: break-all; /*使连续的字母或数字能够在换行时拆分*/
}
</style>
</head>
<body>
<p style="color: red;">table1: table-layout:auto默认状态，每列设置宽度；内容超出宽度会被撑开；</p>
<table class="default" border="1" width="100%">
<tr>
<td width="20%">第一列设置宽度为20%</td>
<td width="80%"></td>
</tr>
<tr>
<td width="20%">10000000000000000000000</td>
<td width="80%">数字测试</td>
</tr>
<tr>
<td width="20%">fjdksljaiwuefwajkjkjjkjljkjlkjljpoif</td>
<td width="80%">字母测试</td>
</tr>
</table>
<br />
<p style="color: red;">table2: table-layout: fixed；设置宽度，内容超过宽度不会被撑开</p>
<table class="fixed" border="1" width="100%">
<tr>
<td width="20%">第一列设置宽度为20%</td>
<td width="40%"></td>
<td width="40%"></td>
</tr>
<tr>
<td width="20%">So , I want to show a paragraph from database into a table cell.</td>
<td width="40%">英文句子，td设置width，不加任何类</td>
<td width="40%" rowspan="2">如果每列宽度固定，中英文句子不用加任何其他css就可以全部显示</td>
</tr>
<tr>
<td width="20%">我是一大长串中文测试内容</td>
<td width="40%">中文句子，td设置width，不加任何类</td>
<td width="40%"></td>
</tr>
<tr>
<td width="20%" class="multiLine">So , I want to show a paragraph from database into a table cell.</td>
<td width="40%">为td设置width=“20%”，multiLine类名</td>
<td width="40%">width的百分比不是整个table的</td>
</tr>
<tr>
<td class="singleLine">So , I want to show a paragraph from database into a table cell.</td>
<td width="40%">英文句子，singleLine类名，td不设width</td>
<td width="40%" rowspan="2">中英文句子省略的情况下，不能为td设置宽度</td>
</tr>
<tr>
<td class="multiLine">So , I want to show a paragraph from database into a table cell.</td>
<td width="40%">英文句子，multiLine类名，td不设width</td>
<td width="40%">100</td>
</tr>
<tr>
<td width="20%">2903929484728907</td>
<td width="40%">数字，不加类名</td>
<td width="40%">会溢出</td>
</tr>
<tr>
<td class="singleLine">2903929484728907</td>
<td width="40%">数字，singleLine类名，td有width</td>
<td width="40%" rowspan="2">纯数字，单行有无width都不影响，多行必须不设置width</td>
</tr>
<tr>
<td class="multiLine">29039292829384903278675328642736497987484728907</td>
<td width="40%">数字，multiLine类名</td>
<td width="40%"></td>
</tr>
<tr>
<td width="20%">EKAFDFDF0dfdfi30</td>
<td width="40%">字母，不加类名</td>
<td width="40%">会溢出</td>
</tr>
<tr>
<td width="20%" class="singleLine">Iwanttoshowaparagraphfromdatabaseintoatablecell.</td>
<td width="40%">字母，singleLine类名，td不设width</td>
<td width="40%" rowspan="2">字母，情况同数字</td>
</tr>
<tr>
<td class="multiLine">Iwanttoshowaparagraphfromdatabaseintoatablecell.</td>
<td width="40%">字母，multiLine类名，td不设width</td>
<td width="40%"></td>
</tr>
</table>
<br />
<p style="color: red;">table3:table-layout: auto; 默认状态，不设置宽度，整个表格会被横向撑开</p>
<table class="default" border="1" width="100%">
<tr>
<td>So , I want to show a paragraph from database into a table cell.</td>
<td>10000000</td>
<td>100</td>
</tr>
<tr>
<td>1000000000000000000000000000000000000000000000000000</td>
<td>1000000000000000000000000000000000000000000000000000</td>
<td>1000000000000000000000000000000000000000000000000000</td>
</tr>
</table>
<br />
<p style="color: red;">table4:table-layout: fixed; 每列不设置宽度，纯字母数字的内容（如编号）会溢出</p>
<table class="fixed" border="1" width="100%">
<tr>
<td>So , I want to show a paragraph from database into a table cell.</td>
<td>10000000</td>
<td>100</td>
</tr>
<tr>
<td>1000000000000000000000000000000000000000000000000000</td>
<td>1000000000000000000000000000000000000000000000000000</td>
<td>1000000000000000000000000000000000000000000000000000</td>
</tr>
</table>
<br />
<p style="color: red;">table5:table-layout: fixed; 每列不设置宽度，纯字母数字的内容（如编号）会溢出</p>
<table class="test" border="1" width="100%">
<tr>
<td>So , I want to show a paragraph from database into a table cell.</td>
<td>10000000</td>
<td>100</td>
</tr>
<tr>
<td class="multiLine">1000000000000000000000000000000000000000000000000000</td>
<td>数字</td>
<td>100</td>
</tr>
<tr>
<td>fjkdsjfklsurieuwprudfslkjflsuepurwpirepwxnvzslkfjwuefiwejfl</td>
<td>字母</td>
<td>100</td>
</tr>
</table>
</body>
</html>