2015-01-02 22 views
60

Ich versuche, eine Tabelle mit 4 Spalten anzuzeigen, von denen eine ein Bild ist. Unten ist der Schnappschuss: - enter image description hereVertikale Ausrichtung in Bootstrap-Tabelle

Ich möchte den Text vertikal zur Mittelposition ausrichten, aber irgendwie scheint das CSS nicht zu funktionieren. Ich habe die bootstrap reaktionsfähigen Tabellen verwendet. Ich möchte wissen, warum mein Code nicht funktioniert und was die richtige Methode ist, damit es funktioniert.

folgenden ist der Code für die Tabelle

CSS

img { 
    height: 150px; 
    width: 200px; 
} 
th, td { 
    text-align: center; 
    vertical-align: middle; 
} 

HTML

<table id="news" class="table table-striped table-responsive"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Phone</th> 
      <th>Photo</th> 
     </tr> 
    </thead> 
    <tbody> 
     <?php 
     $i=0; 
     foreach ($result as $row) 
     { ?> 
     <tr> 
      <td> 
       <?php echo 'Lorem Ispum'; ?> 
      </td> 
      <td> 
       <?php echo '[email protected]'; ?> 
      </td> 
      <td> 
       <?php echo '9999999999'; ?> 
      </td> 
      <td> 
       <?php echo '<img src="'. base_url('files/images/test.jpg').'">'; ?> 
      </td> 
     </tr> 

     <?php 
     } 
     ?>   
    </tbody> 
</table> 

Antwort

155

Basierend auf was Sie Ihre CSS-Selektor zur Verfügung gestellt haben, ist nicht specific genug außer Kraft setzen die von Bootstrap definierten CSS-Regeln.

Try this:

.table > tbody > tr > td { 
    vertical-align: middle; 
} 
+0

Was ist, wenn ich das nur in einer Tabelle verwenden möchte? –

+0

Hoppla ... machte es falsch. Ich habe versucht .table tbody> tr> td> .vert-align anstelle von .table tbody> tr> td.vert-align. –

+6

@BarryFranklin Fügen Sie eine Klasse zu dieser Tabelle hinzu, '

', und erhöhen Sie die Spezifität des Selektors leicht mit dieser Klasse, 'table.vertical-align> tbody> tr> td {} '. Sie könnten auch '.table.vertical-alilgn> tbody> tr> td {}' machen, obwohl das eine höhere Spezifität als die erste Option hat. Ich versuche immer, die Spezifität in meinen CSS-Selektoren so wenig wie möglich zu erhöhen, wenn ich kann. Beachten Sie, dass die erste Option ein Tabellenelement mit '.vertical-align 'auswählt, während die zweite Option ein Element mit den Klassen' .table' und '.vertical-align' auswählt. – hungerstar

1

Die folgende scheint funktionieren:

table td { 
    vertical-align: middle !important; 
} 

Sie auf eine bestimmte Tabelle anwenden können ebenso wie so:

#some_table td { 
    vertical-align: middle !important; 
} 
+2

'! Wichtig' ist Overkill und fügt viel mehr Spezifität als nötig hinzu. – hungerstar

1

Für mich <td class="align-middle" >${element.imie}</td> Werke . Ich benutze Bootstrap v4.0.0-beta.