Tabellenzeilen nicht ausgerichtet

Question

Ich habe zwei Tabellen in der folgenden Geige. Die Zeilen sind nicht auf den Header ausgerichtet. Dies ist mein Code für die erste Tabelle

<table class=" table-bordered"> 
    <tr> 
     <th>Doc Name:</th> 
     <th>Atom Type:</th> 
     <th>Cluster Method:</th> 
     <th>k:</th> 
     <th> 
      <small>Stylistic Feature(s):</small> 
     </th> 
    </tr> 
    <tr> 
     <td style="font-size: 10px;">rowling_and_dickens</td> 
     <td style="font-size: 10px;">sentence</td> 
     <td style="font-size: 10px;">kmeans</td> 
     <td style="font-size: 10px;">2</td> 
     <td style="font-size: 10px;">hapax_dislegomena;honore_r_measure;hapax_legomena;</td> 
    </tr> 
</table> 

Die andere Tabelle folgt einem ähnlichen Muster. Ich füge sie hier wegen Platzmangel nicht hinzu.

https://jsfiddle.net/fk6fnto4/

Meine Tabellenzeilen werden nicht richtig ausgerichtet ist, egal was ich tue. Ich habe mir viele Lösungen angesehen und den Code entsprechend geändert, ohne Erfolg. Bitte helfen Sie mir zu identifizieren, was hier falsch ist.

Answer 1

Um den Spalteninhalt auszurichten, müssen wir die Breite festsetzen. Derzeit benötigt jede Zelle so viel Platz wie nötig. Es scheint, dass die erste Spalte die kleinste Breite und die dritte die breiteste sein sollte. Andere Spalten können die gleiche Breite haben, da sie alle 5-stellige Zahlen enthalten. So stellen unterschiedliche td Breiten konnten wir verschiedene Klassen für jede verwenden, aber es könnte chaotisch sein, so werden wir nth-child() Selektor verwenden, die wie folgt aussieht:

td:nth-child(1) { 
    width: 10% 
} 

Dies setzt Breite aller td Elemente, die das erste Kind sind von ihren Eltern zu 10%. Was Sie tun sollten, ist dies zu Ihrem Stil hinzufügen, damit es so aussieht:

<style> 
    .container { 
    margin-left: 0; 
    } 

    tbody { 
    display: block; 
    max-height: 500px; 
    overflow-y: scroll; 
    } 

    thead, 
    tbody tr { 
    display: table; 
    width: 100%; 
    } 

    thead { 
    width: 100%; 
    } 

    table { 
    width: 200px; 
    } 

    td:nth-child(1) { 
    width:10% 
    } 

    td:nth-child(3) { 
    width:30% 
    } 

</style> 

Das bedeutet, dass die erste Spalte wird 10% der tbody Breite einnehmen, wird der dritte 30% einnehmen, und andere verwenden jeweils 20%. Wenn diese jedoch auch Daten variabler Länge enthalten können, sollten Sie für sie auch ähnliche Regeln hinzufügen.

Auf diese Weise wird der Spalteninhalt auf die Mitte ausgerichtet. Um eine andere Ausrichtung festzulegen, verwenden Sie die Eigenschaft text-align.