Bootstrap td zentriert mit Text linksbündig

Question

Ich habe die folgende Tabelle. Was ich will, ist, den Inhalt jedes td in seiner Mitte (zentriert) zu positionieren und den Text linksbündig zu halten. Die Daten werden dynamisch sein und ich möchte die Tabelle ansprechend halten.

<table class="table table-hover"> 

    <tr> 
     <td><a href="">Inter Milan</a></td> 
     <td><span class="label label-default">0 - 1</span></td> 
     <td><a href="">Lazzio Roma</a></td> 
    </tr> 

    <tr> 
     <td><a href="">Bayern Munich</a></td> 
     <td><span class="label label-default">3 - 3</span></td> 
     <td><a href="">Herta Berlin</a></td> 
    </tr> 

</table> 

Ich versuchte es mit der CSS-

table td { 
    text-align: center; 
} 

zu lösen, aber ich will noch der Text (zB Inter und Bayern auf der gleichen Ausrichtung Ebene) ausgerichtet zu bleiben.

Beachten Sie, dass ich Tabellenlayout verwendet: Fixed auf verschiedenen Tabellen auf der gleichen Seite, das gleiche Layout auf verschiedenen Tabellen zu halten.

Answer 1

Dies ist fast die beste Lösung, die ich finden konnte. Ich verließ die erste Spalte ausgerichtet, zentrierte die zweite und rechtsbündig die letzte. Ich habe eine Anfangs- und Endtds hinzugefügt, um den Inhalt in der Mitte zu haben. Ich weiß nicht, ob du es zu einem besseren verschönern kannst. Wenn nicht, ist es eine gute Lösung zu verwenden :)

<table class="table table-hover"> 
    <tr> 
    <td></td> 
    <td><a href="">Inter Milan</a></td> 
    <td style="text-align:center"> 
     <span class="label label-default">0 - 1</span> 
    </td> 
    <td style="text-align: right;"><a href="">Lazzio Roma</a></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td><a href="">Bayern Munich</a></td> 
    <td style="text-align: center"> 
     <span class="label label-default">3 - 3</span></td> 
    <td style="text-align: right;"><a href="">Herta Berlin</a></td> 
    <td></td> 
    </tr> 
</table> 

Answer 2

könnten Sie mit der Polsterung rumspielen:

td:nth-child(1) a{ 
 
    padding-left: 25%; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <table class="table table-hover"> 
 
     <tr> 
 
     <td><a href="">Inter Milan</a></td> 
 
     <td><span class="label label-default">0 - 1</span></td> 
 
     <td><a href="">Lazzio Roma</a></td> 
 
     </tr> 
 
     <tr> 
 
     <td><a href="">Bayern Munich</a></td> 
 
     <td><span class="label label-default">3 - 3</span></td> 
 
     <td><a href="">Herta Berlin</a></td> 
 
     </tr> 
 
    </table> 
 
</div>

Es ist wahrscheinlich eine bessere Lösung für sie, aber ich hoffe, dass es ein bisschen

Answer 3

Versuchen hilft diese

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<table class="table table-hover table-bordered text-center"> 
 
    <tr> 
 
    <td><a href="">Inter Milan</a></td> 
 
    <td><span class="label label-default">0 - 1</span></td> 
 
    <td><a href="">Lazzio Roma</a></td> 
 
    </tr> 
 
    <tr> 
 
    <td><a href="">Bayern Munich</a></td> 
 
    <td><span class="label label-default">3 - 3</span></td> 
 
    <td><a href="">Herta Berlin</a></td> 
 
    </tr> 
 
</table>