Dev Faq
0
votes

Pourquoi ne pas couvrir 100% de largeur de la ligne? HTML CSS

J'ai créé une table HTML de base, mais je ne peux pas sembler avoir le haut code> pour couvrir 100% largeur de son parent code> élément (et finalement le

code> élément).

p> 

<table class="my-card-table">
  <tr class="table-top-heading">
    <th class="table-top-heading-header">HelloWorld</th>
  </tr>
  <tr class="my-card-table-heading">
    <th class="my-card-table-heading-inner">Teachers</th>
    <th class="my-card-table-heading-inner">School</th>
    <th class="my-card-table-heading-inner">Status</th>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 1</a></td>
    <td class="my-table-td">Long Grove</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-white">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 2</a></td>
    <td class="my-table-td">Long Grove</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 3</a></td>
    <td class="my-table-td">Lincolnshire</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-white">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 4</a></td>
    <td class="my-table-td">Buffalo Grove</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 5</a></td>
    <td class="my-table-td">Kenilworth</td>
    <td class="my-table-td">Not Logged In</td>
  </tr>
  <tr class="my-card-table-row-white">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 6</a></td>
    <td class="my-table-td">Schaumburg</td>
    <td class="my-table-td">Not Logged In</td>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 7</a></td>
    <td class="my-table-td">Schaumburg</td>
    <td class="my-table-td">Not Logged In</td>
  </tr>
</table>

3 commentaires

Cela vous sera utile: développeur.mozilla.org/fen -US / Docs / Apprendre / HTML / Tables / Basics Pour comprendre comment une table fonctionne et doit être construite. Vérifiez l'attribut Colspan pour un indice rapide.

N'as-tu pas réglé la largeur de l'en-tête ou je manque quelque chose?

@RgutterSohn J'avais manqué ce style dans la CSS mais s'il vous plaît voir ce violon mis à jour pour voir que l'ajout de largeur (et colspan) au Th et TR n'ont eu aucun effet: JSFIDDLE.NET/HAPPHANDS31/CWHZB35N/12

3 Réponses :

1
votes

maintenant le monde helloworld en centre, utilisé Colspan = 3 fort>

p> 

<style>
.my-card-table {
    width: 100%;
    border: 1px solid #D9D7D6;
    table-layout: fixed!important;
}

.table-top-heading {
    display: block;
    text-align: center;
}

.my-card-table-heading {
    background-color: #E9E9E9!important;
    font-family: "Proxima Nova Regular";
    color: #000000;
    font-size: 1rem;
    padding: 10px 5px 10px 5px;
}

.my-card-table-heading-inner {
    background-color: #E9E9E9!important;
    font-family: "Proxima Nova Regular";
    color: #000000;
    font-size: 1rem;
    text-align: left;
    padding: 10px 0 10px 30px
}

.my-card-table-row-grey {
    background-color: #F2F3F3!important;
    padding: 10px!important;
}

.my-card-table-row-white {
    background-color: #ffffff!important;
    padding: 10px!important;
}

..my-table-td {
    text-align: left;
    padding-left: 30px;
}

.my-card-link {
    color: #0e5b8b;
}

.my-card-link:hover {
    font-family: "Proxima Nova Bold";
    color: #0e5b8b;
}

.my-card-link-2 {
    color: #212529;
}
</style>
<table class="my-card-table">
                    <tr >        
           <th  colspan=3;>HelloWorld</th>
                    </tr>
                    
                    <tr class="my-card-table-heading">
                      <th class="my-card-table-heading-inner">Teachers</th>
                      <th class="my-card-table-heading-inner">School</th>
                      <th class="my-card-table-heading-inner">Status</th>
                    </tr>
                    <tr class="my-card-table-row-grey">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 1</a></td>
                      <td class="my-table-td">Long Grove</td>
                      <td class="my-table-td">Logged In</td>
                    </tr>
                    <tr class="my-card-table-row-white">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 2</a></td>
                      <td class="my-table-td">Long Grove</td>
                      <td class="my-table-td">Logged In</td>
                    </tr>
                    <tr class="my-card-table-row-grey">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 3</a></td>
                      <td class="my-table-td">Lincolnshire</td>
                      <td class="my-table-td">Logged In</td>
                    </tr>
                    <tr class="my-card-table-row-white">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 4</a></td>
                      <td class="my-table-td">Buffalo Grove</td>
                      <td class="my-table-td">Logged In</td>
                    </tr>
                    <tr class="my-card-table-row-grey">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 5</a></td>
                      <td class="my-table-td">Kenilworth</td>
                      <td class="my-table-td">Not Logged In</td>
                    </tr>
                    <tr class="my-card-table-row-white">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 6</a></td>
                      <td class="my-table-td">Schaumburg</td>
                      <td class="my-table-td">Not Logged In</td>
                    </tr>
                    <tr class="my-card-table-row-grey">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 7</a></td>
                      <td class="my-table-td">Schaumburg</td>
                      <td class="my-table-td">Not Logged In</td>
                    </tr>
                  </table>

0 commentaires
2
votes

Deux choses:

1.) Vous devez ajouter colspan = "3" code> en tant qu'attribut à ce TH code> pour le faire couvrir les trois colonnes de cette Tableau. p>

2.) Vous ne devez pas em> utiliser affichage: bloquer code> pour un élément de table, peu importe si c'est td code>, TH code>, tr code> ou autre. Le réglage d'affichage du TH code> par défaut est Cellule de table code> - il suffit de quitter cela tel quel, sinon la table ne sera pas une "vraie table" à la fin ( C'est-à-dire que les cellules perdent leur mode automatique d'alignement et de réglage eux-mêmes). p>

p> 

<table class="my-card-table">
  <tr class="table-top-heading">
    <th class="table-top-heading-header" colspan="3">HelloWorld</th>
  </tr>
  <tr class="my-card-table-heading">
    <th class="my-card-table-heading-inner">Teachers</th>
    <th class="my-card-table-heading-inner">School</th>
    <th class="my-card-table-heading-inner">Status</th>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 1</a></td>
    <td class="my-table-td">Long Grove</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-white">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 2</a></td>
    <td class="my-table-td">Long Grove</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 3</a></td>
    <td class="my-table-td">Lincolnshire</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-white">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 4</a></td>
    <td class="my-table-td">Buffalo Grove</td>
    <td class="my-table-td">Logged In</td>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 5</a></td>
    <td class="my-table-td">Kenilworth</td>
    <td class="my-table-td">Not Logged In</td>
  </tr>
  <tr class="my-card-table-row-white">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 6</a></td>
    <td class="my-table-td">Schaumburg</td>
    <td class="my-table-td">Not Logged In</td>
  </tr>
  <tr class="my-card-table-row-grey">
    <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 7</a></td>
    <td class="my-table-td">Schaumburg</td>
    <td class="my-table-td">Not Logged In</td>
  </tr>
</table>

2 commentaires

C'est incroyable mais quand je copierais et coller votre code dans Jsfiddle, il me donne toujours le même résultat: Jsfiddle.net / Happyhands31 / 76AMLKW4 / 3 . Affichage: Bloc a été supprimé et colspan = "3" a été ajouté. Edit Cependant, il fonctionne sur mon serveur en direct afin que le problème soit peut-être avec Jsfiddle dans ce cas. Merci.

@ Happyhands31 Il est causé par des paramètres dans JS Fiddle. Si vous cliquez sur la flèche vers le bas à côté du texte CSS en haut de la section CSS, vous verrez une option allumée appelée «CSS normalisée». Tournez cela et se comporte comme vous le souhaitez lorsque vous retentissez votre échantillon. .

1
votes

Vous pouvez définir votre "MMY-CARD-TABLE" et "TOPED-TOP-TOPHORD" à {DISPLAY: Flex} et de votre "en-tête de haut-t-à-tête" à {largeur: 100%; Text-Align: Centre}.

Vous avez également eu un supplément (.) sur votre classe (My-Table-TD). P>

Voici une solution de travail;) p>

p> 

<table class="my-card-table">
                    <tr class="table-top-heading">
                      <th class="table-top-heading-header">HelloWorld</th>
                    </tr>
                    <tr class="my-card-table-heading">
                      <th class="my-card-table-heading-inner">Teachers</th>
                      <th class="my-card-table-heading-inner">School</th>
                      <th class="my-card-table-heading-inner">Status</th>
                    </tr>
                    <tr class="my-card-table-row-grey">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 1</a></td>
                      <td class="my-table-td">Long Grove</td>
                      <td class="my-table-td">Logged In</td>
                    </tr>
                    <tr class="my-card-table-row-white">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 2</a></td>
                      <td class="my-table-td">Long Grove</td>
                      <td class="my-table-td">Logged In</td>
                    </tr>
                    <tr class="my-card-table-row-grey">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 3</a></td>
                      <td class="my-table-td">Lincolnshire</td>
                      <td class="my-table-td">Logged In</td>
                    </tr>
                    <tr class="my-card-table-row-white">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 4</a></td>
                      <td class="my-table-td">Buffalo Grove</td>
                      <td class="my-table-td">Logged In</td>
                    </tr>
                    <tr class="my-card-table-row-grey">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 5</a></td>
                      <td class="my-table-td">Kenilworth</td>
                      <td class="my-table-td">Not Logged In</td>
                    </tr>
                    <tr class="my-card-table-row-white">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 6</a></td>
                      <td class="my-table-td">Schaumburg</td>
                      <td class="my-table-td">Not Logged In</td>
                    </tr>
                    <tr class="my-card-table-row-grey">
                      <td class="my-table-td"><a href="" onclick="return false" class="my-card-link">Teacher 7</a></td>
                      <td class="my-table-td">Schaumburg</td>
                      <td class="my-table-td">Not Logged In</td>
                    </tr>
                  </table>

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor