Comment puis-je styliser la table pour qu'elle soit pleine largeur du conteneur et faire en sorte que les cellules utilisent le pourcentage de la largeur?
Ceci est mon html. Le tableau ci-dessous est à l'intérieur d'une div conteneur qui a une largeur fixe de 670px. Maintenant, je ne sais pas comment procéder pour que cette table capture la pleine largeur du conteneur.
<table class="table_fields">
<tr class="table_fields_top">
<td><?php _e('Published','news'); ?></td>
<td><?php _e('Story','news'); ?></td>
<td><?php _e('Views','news'); ?></td>
<td><?php _e('Comments','news'); ?></td>
<td><?php _e('Rating','news'); ?></td>
</tr>
</table>
Voici mon CSS:
.table_fields {
display: block;
background: #fff;
border: 1px solid #dce1e9;
border-bottom: 0;
border-spacing: 0;
}
.table_fields .table_fields_top {background: #f1f3f6;}
.table_fields .table_fields_top td{
font-size: 10px;
text-transform: uppercase;
}
.table_fields td {
text-align: center;
border-bottom: 1px solid #dce1e9;
border-right: 1px solid #dce1e9;
font-size: 11px;
line-height: 16px;
color: #666;
white-space:nowrap;
}
J'ai essayé de régler la largeur: 100%; mais il a renvoyé des espaces vides mais les TD ne sont pas équilibrés. Je ne sais pas comment faire pour que les TD soient toujours pleins à 100% de l'espace. J'ai essayé de définir la largeur: 20% pour chaque TD car ils sont 5 tds pour recevoir 100% de largeur. Mais cela n'a pas fonctionné. Quelqu'un peut-il me dire comment faire rentrer les cellules dans le TOUTE la largeur du tableau 100% (étant donné chaque TD a un pourcentage fixe de largeur comme 20%) s'il vous plaît.
Je pense que votre problème est que vous avez display: block remplaçant le mode d'affichage par défaut de la table (qui est table). Supprimez cela, puis essayez d'appliquer width: 100% à la table.