Maison >interface Web >tutoriel CSS >Pourquoi la taille du tableau change-t-elle avec table-layout:fixed en CSS ?
Pourquoi la taille du tableau change-t-elle avec table-layout:fixed en CSS ?
- 黄舟original
- 2017-06-30 13:48:482031parcourir
Ouvrez-le pour la première fois
s'affiche correctement
Après avoir cliqué sur Supprimer
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='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>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='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>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!