ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSのtable-layout:fixedでテーブルサイズが変わるのはなぜですか?
CSSのtable-layout:fixedでテーブルサイズが変わるのはなぜですか?
- 黄舟オリジナル
- 2017-06-30 13:48:482030ブラウズ
初めて開きます
表示は正しいです
削除をクリックすると
テーブルが小さくなります。
これはなぜですか?
注文のごみ箱は固定サイズのレイヤーで、その下にテーブル (テーブルソーター) があります
<div class="tableHeader" style="width:928px">订单回收站</div>
<table class="tablesorter" cellspacing="1" style="word-break:break-all;table-layout:fixed;">
<thead>
<tr>
<th style="width:40px;">选择</th>
<th style="width:100px;">品名</th>
<th style="width:70px;">照片</th>
<th style="width:80px;">订货时间</th>
<th style="width:90px;">颜色</th>
<th style="width:50px;">数量</th>
<th style="width:60px;">单价</th>
<th style="width:60px;">总价</th>
<th style="width:100px;">生产状态</th>
<th style="width:100px;">备注</th>
<th style="width:80px;">客户</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="chk_list" type="checkbox" value='2134' /></td>
<td>DP-TA-88</td>
<td><a href='../PriceList/bigPhoto/DP-TA-88.jpg' class='highslide' onclick='return hs.expand(this)'>
<img src='../PriceList/smallPhoto/DP-TA-88.jpg' alt='照片' onerror=this.src='../images/noPhoto.png' onload='ReSizeImage(this,70,70);'></a>
</td>
<td>2011/9/19<br /><font color="#FF0000">2011/9/19</font><br />剩 -1天</td>
<td>如图</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td></td>
<td></td>
<td>世贸其他</td>
</tr>
</tbody>
</table>ブラウザに問題がありますか?
テーブルの幅は次のように設定するのが最適です: width="500" =>style ="width:500px; "ブラウザのサポートが高くなります
テーブルには width="928" を設定するのが最適です
コンテンツを表示するときに、テーブルで幅を設定し、高さを設定していないことに気付いたことがありますか? table では、表が拡張され、その中にテキストと画像が表示されます。情報表を削除して元のサイズに戻したら、表と表内の各セルの高さと幅を修正する必要があります。
<style type="text/css">
th{height:50px}
td{height:100px}
</style>
</HEAD>
<BODY>
<div class="tableHeader" style="width:928px;background-color:red">订单回收站</div>
<table border="1" class="tablesorter" cellspacing="1" style="word-break:break-all;table-layout:fixed;width:928px">
<thead>
<tr>
<th style="width:40px;">选择</th>
<th style="width:100px;">品名</th>
<th style="width:70px;">照片</th>
<th style="width:80px;">订货时间</th>
<th style="width:90px;">颜色</th>
<th style="width:50px;">数量</th>
<th style="width:60px;">单价</th>
<th style="width:60px;">总价</th>
<th style="width:100px;">生产状态</th>
<th style="width:100px;">备注</th>
<th style="width:80px;">客户</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="chk_list" type="checkbox" value='2134' /></td>
<td>DP-TA-88</td>
<td><a href='../PriceList/bigPhoto/DP-TA-88.jpg' class='highslide' onclick='return hs.expand(this)'>
<img src='../PriceList/smallPhoto/DP-TA-88.jpg' alt='照片' onerror=this.src='../images/noPhoto.png' onload='ReSizeImage(this,70,70);'></a>
</td>
<td>2011/9/19<br /><font color="#FF0000">2011/9/19</font><br />剩 -1天</td>
<td>如图</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td></td>
<td></td>
<td>世贸其他</td>
</tr>
</tbody>
</table>
</BODY>以前、div の幅が設定されていると誰かが述べていましたが、table の幅を設定し、状況に応じて th と td の両方で固定の高さを設定するのが最善です。 。 divとテーブルの幅が同じであることがより明確にわかるように、divに色を追加しました。後で削除しても大丈夫です。
以上がCSSのtable-layout:fixedでテーブルサイズが変わるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。