cssテーブルでtable-layout:fixedを設定した後の無効なセル幅設定の解決策

テーブルに table-layer:fixed スタイルを設定した後、テーブル内の 1 つの行がマージされていることがわかりました。マージされていない他の行の列幅は平均化され、列幅の設定は無効になります。詳細は以下にあります誰でも解決策を学ぶことができます 設定テーブルで table-layer:fixed スタイルを設定したところ、テーブル内の 1 行が結合され、結合されていない他の行の列幅が平均化されてしまい、列幅の設定が無効になってしまいます。テーブルの結合行を削除すれば正常に表示できます。 理由:
table-layout
: 固定テーブル、各列の幅は最初の行によって決定され、後で指定された幅は無視されます。最初の行を結合したため、列幅は均等に分割されています。 解決策 1:

tbody の前に


を追加します。 コードは次のとおりです:

<col style="width: 60%" /> 
<col style="width: 20%" /> 
<col style="width: 20%" />

解決策 2:

幅を指定する非表示の行を設定します:

コードは次のとおりです:

<table style="table-layout:fixed;width:200px" border="1" cellspacing="1" cell
padding
="1"> 
<tr style="
display
:none"> 
<td style="width:100px"></td> 
<td style="width:80px"></td> 
<td style="width:20px"></td> 
</tr> 
<tr> 
<td>1</td> 
<td colspan="2">2</td> 
</tr> 
<tr> 
<td>1.1</td> 
<td>2.1</td> 
<td>2.2</td> 
</tr> 
</table>

このメソッドは機能します。 IE6 および IE7 では、IE8 では正しく表示されますが、IE 以外では効果がありません。別の方法を以下に示します:

コードは次のとおりです:

<style> 
td{border:1px solid red;} 
</style> 
<table style="table-layout:fixed;width:200px" border="0" cellspacing="1" cellpadding="1"> 
<tr style="
height
:0;"> 
<th style="width:100px"></th> 
<th style="width:80px"></th> 
<th style="width:20px"></th> 
</tr> 
<tr> 
<td>1</td> 
<td colspan="2">2</td> 
</tr> 
<tr> 
<td>1.1</td> 
<td>2.1</td> 
<td>2.2</td> 
</tr> 
</table>

以上がcssテーブルでtable-layout:fixedを設定した後の無効なセル幅設定の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。