0
votes

Comment redimensionner la largeur de la table HTML afin que le dernier est plus grand les deux premiers

Je suis nouveau dans Django, HTML et CSS et dans Stackoverflow et avez besoin de votre aide.

J'ai une table: p> xxx pré>

Je veux faire La FIFRT deux colonnes largeur 100px et le troisième - le dernier 250px strong>. P>

C'est ce que j'ai essayé dans CSS fort> mais cela ne fait que la colonne FISRT 100 px. P>

  .grade_book table td {text-align: left;font-size: 14px;}

  .grade_book .table{ table-layout:fixed; font-size: 16px; width: 100%;  margin-bottom: 100px; border-collapse: collapse;}

  .grade_book th {  width: 90px;}

  .grade_book th+th {  width: auto;}

django html css

0 commentaires

3 Réponses :

0
votes

Étant donné que l'en-tête de votre table est écrit à la main, vous pouvez l'ajuster à ceci:

<div class="grade_book">
  <table class="table">
    <tr><th width="100">Year</th><th>Grade</th><th width="250">Category</th></tr>
       {% for year, grade, category in results %}
         <tr><td>{{year}}</td><td>{{grade}}</td><td>{{category}}</td></tr>        
       {% endfor %}         
  </table>
</div>

2 commentaires

Votre code ne fonctionne pas. donne toujours le premier plus petit et deux fois plus grand

Désolé Nova, j'ai oublié de mentionner que vous devez supprimer toutes vos propriétés de largeur CSS, j'ai ajouté la réponse. Si cela ne fonctionne pas, vous pourriez avoir plus de fichiers CSS qui se mêleront à la disposition de la table.

0
votes

Jetez un coup d'œil à : Nth-enfant () code> Sélecteur, avec lequel vous pouvez spécifier quel élément vous souhaitez ajuster en fonction de l'ordre de l'apparence.

<html>
<head>
 <style>
  .grade_book table td {text-align: left;font-size: 14px;}

  .grade_book .table{ table-layout:fixed; font-size: 16px; margin-bottom: 100px; border-collapse: collapse;}

  .grade_book th {  width: 100px}
  .grade_book th:nth-child(3) {  width: 250px;}

 </style>
</head>
<body>
 <div class="grade_book">
  <table class="table">
   <tr><th>Year</th><th>Grade</th><th>Category</th></tr>
   <tr><td>2020</td><td>A</td><td>Science</td></tr>
   <tr><td>2020</td><td>B</td><td>History</td></tr>
   <tr><td>2020</td><td>F</td><td>Math</td></tr>
  </table>
 </div>
</body>
</html>

0 commentaires

0
votes

avec l'utilisation de : dernier enfant code> Je change également la largeur de votre classe .table code> pour corriger la largeur. Sinon, la largeur ne sera pas respectée

Je viens de supprimer votre boucle de brindille, mais cela devrait fonctionner correctement: p>

p>



<div class="grade_book"><table class="table">
      <tr><th>Year</th><th>Grade</th><th>Category</th></tr>
 
           <tr><td>{{year}}</td><td>{{grade}}</td><td>{{category}}</td></tr>        
  
        
    </table></div>

0 commentaires