Warum ändert sich die Tabellengröße mit table-layout:fixed in CSS?-CSS-Tutorial-php.cn

Warum ändert sich die Tabellengröße mit table-layout:fixed in CSS?

黄舟

Freigeben： 2017-06-30 13:48:48

Original

1942 Leute haben es durchsucht

Erstmaliges Öffnen

Warum ändert sich die Tabellengröße mit table-layout:fixed in CSS?

wird korrekt angezeigt

Nach dem Klicken auf „Löschen“

Warum ändert sich die Tabellengröße mit table-layout:fixed in CSS?

ändert sich die Tabelle Kleiner.

Warum ist das so?
Der Papierkorb für Bestellungen ist eine Ebene fester Größe mit einer Tabelle darunter

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

Nach dem Login kopieren

Gibt es ein Browserproblem?

Die Breite der Tabelle wird am besten so eingestellt: width=" 500" =>style="width:500px;" Browserunterstützung ist höher

Am besten stellen Sie die Tabelle auf width="928" ein

Ist Ihnen das schon einmal aufgefallen? Sie befinden sich in der Tabelle? Die Breite ist im Inneren festgelegt, aber die Höhe ist nie festgelegt. Wenn Sie Inhalte in der Tabelle anzeigen, wird die Tabelle mit den darin enthaltenen Texten und Bildern erweitert Originalgröße. Sie sollten die Höhe und Breite der Tabelle und jeder Zelle in der Tabelle festlegen.

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

Nach dem Login kopieren

Wie bereits erwähnt, ist es am besten, die Breite des Divs festzulegen, und es ist am besten, die Tabelle festzulegen und dann je nach Situation eine feste Höhe für th und td festzulegen . . Ich habe dem Div nur Farbe hinzugefügt, damit Sie deutlicher sehen können, dass die Breite des Div und der Tabelle gleich sind. Wenn Sie es später löschen, ist es in Ordnung.

Das obige ist der detaillierte Inhalt vonWarum ändert sich die Tabellengröße mit table-layout:fixed in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!