Pourquoi la taille du tableau change-t-elle avec table-layout:fixed en CSS ?-tutoriel CSS-php.cn

Pourquoi la taille du tableau change-t-elle avec table-layout:fixed en CSS ?

黄舟

Libérer： 2017-06-30 13:48:48

original

2035 Les gens l'ont consulté

Ouvrez-le pour la première fois

Pourquoi la taille du tableau change-t-elle avec table-layout:fixed en CSS ?

s'affiche correctement

Après avoir cliqué sur Supprimer

Pourquoi la taille du tableau change-t-elle avec table-layout:fixed en CSS ?

le tableau change plus petit.

Pourquoi ça ?
La corbeille des commandes est un calque de taille fixe avec un tableau en dessous

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

Copier après la connexion

Y a-t-il un problème de navigateur ?

Il est préférable de définir la largeur du tableau comme ceci : width=" 500" =>style="width:500px;" La prise en charge du navigateur est plus élevée

Il est préférable de définir le tableau sur width="928"

Avez-vous déjà remarqué que vous êtes dans le tableau ? La largeur est définie à l'intérieur, mais la hauteur n'est jamais définie. Lorsque vous affichez le contenu dans le tableau, le tableau s'agrandit avec le texte et les images à l'intérieur. Une fois les informations supprimées, le tableau retrouve son état. taille d'origine. Vous devez fixer la hauteur et la largeur du tableau et de chaque cellule du tableau.

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

Copier après la connexion

Comme quelqu'un l'a déjà mentionné, la largeur de div est définie, et il est préférable de définir la largeur de la table, puis th et td doivent définir une hauteur fixe, en fonction de la situation. . J'ai ajouté de la couleur au div juste pour que vous puissiez voir plus clairement que la largeur du div et du tableau sont les mêmes. Ce sera ok si vous le supprimez plus tard.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!