CSSのtable-layout:fixedでテーブルサイズが変わるのはなぜですか?-CSSチュートリアル-php.cn

CSSのtable-layout:fixedでテーブルサイズが変わるのはなぜですか?

黄舟

リリース： 2017-06-30 13:48:48

オリジナル

2031 人が閲覧しました

初めて開きます

CSSのtable-layout:fixedでテーブルサイズが変わるのはなぜですか?

表示は正しいです

削除をクリックすると

CSSのtable-layout:fixedでテーブルサイズが変わるのはなぜですか?

テーブルが小さくなります。

これはなぜですか?
注文のごみ箱は固定サイズのレイヤーで、その下にテーブル (テーブルソーター) があります

<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=&#39;2134&#39; /></td>
                       <td>DP-TA-88</td>
                       <td><a href=&#39;../PriceList/bigPhoto/DP-TA-88.jpg&#39; class=&#39;highslide&#39; onclick=&#39;return hs.expand(this)&#39;>
                       <img src=&#39;../PriceList/smallPhoto/DP-TA-88.jpg&#39; alt=&#39;照片&#39; onerror=this.src=&#39;../images/noPhoto.png&#39; onload=&#39;ReSizeImage(this,70,70);&#39;></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=&#39;2134&#39; /></td>
                       <td>DP-TA-88</td>
                       <td><a href=&#39;../PriceList/bigPhoto/DP-TA-88.jpg&#39; class=&#39;highslide&#39; onclick=&#39;return hs.expand(this)&#39;>
                       <img src=&#39;../PriceList/smallPhoto/DP-TA-88.jpg&#39; alt=&#39;照片&#39; onerror=this.src=&#39;../images/noPhoto.png&#39; onload=&#39;ReSizeImage(this,70,70);&#39;></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 サイトの他の関連記事を参照してください。