Wie Glyphicons in einem Tabellenkopf inline angeordnet werden?

Ich habe eine Bootstrap-Tabelle mit Glyphicons in der Überschrift. Ich kann sie nicht inline ausrichten, wenn der Bildschirm klein/mittel ist.Wie Glyphicons in einem Tabellenkopf inline angeordnet werden?

HTML

<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th><span class="glyphicon glyphicon-sort"></span><span>First Name</span></th> 
     <th><span class="glyphicon glyphicon-sort"></span><span>Last Name</span></th> 
     <th><span class="glyphicon glyphicon-sort"></span><span>Username</span></th> 
     <th><span class="glyphicon glyphicon-sort"></span><span>First Name</span></th> 
     <th><span class="glyphicon glyphicon-sort"></span><span>Last Name</span></th> 
     <th><span class="glyphicon glyphicon-sort"></span><span>Username</span></th> 
     <th><span class="glyphicon glyphicon-sort"></span><span>First Name</span></th> 
     <th><span class="glyphicon glyphicon-sort"></span><span>Last Name</span></th> 
     <th><span class="glyphicon glyphicon-sort"></span><span>Username</span></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>Mark</td> 
     <td>Otto</td> 
     <td>@mdo</td> 
     <td>Mark</td> 
     <td>Otto</td> 
     <td>@mdo</td> 
     <td>Mark</td> 
     <td>Otto</td> 
     <td>@mdo</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Jacob</td> 
     <td>Thornton</td> 
     <td>@fat</td> 
     <td>Mark</td> 
     <td>Otto</td> 
     <td>@mdo</td> 
     <td>Mark</td> 
     <td>Otto</td> 
     <td>@mdo</td> 

    </tr> 
    <tr> 
     <td>3</td> 
     <td>Larry</td> 
     <td>the Bird</td> 
     <td>@twitter</td> 
     <td>Mark</td> 
     <td>Otto</td> 
     <td>@mdo</td> 
     <td>Mark</td> 
     <td>Otto</td> 
     <td>@mdo</td> 

    </tr> 
    </tbody> 
</table>

Fiddle demo

Quelle

2016-07-11 Raviteja

Sie wollen, dass sie auf 1 Zeile? ... so: http://jsfiddle.net/LGSon/wt5mdwe5/1/ – LGSon

Oder nur der Text im 2: nd span ... so: http://jsfiddle.net/LGSon/wt5mdwe5/3/ – LGSon

Ich möchte nicht die Überlaufrolle für unten. Ich werde diese Tabelle in eine "Zeile" einschließen. – Raviteja

Sie aligned-bottom als Standard durch bootstrap, wenn Sie sie align wollen top können Sie diese außer Kraft setzen

.table>thead>tr>th{vertical-align:bottom}

Fügen Sie diese in Ihrem CSS:

.table.table-striped>thead>tr>th{vertical-align:top}

http://jsfiddle.net/wt5mdwe5/2/

Quelle

2016-07-11 10:07:57

Wie Glyphicons in einem Tabellenkopf inline angeordnet werden?

Antwort

Verwandte Themen