Bootstrap Tabelle Ausrichtungsproblem

Question

Ich versuche, meine Tabellenkopfzeile auszurichten und wie auf dem Bild gezeigt, aber bis jetzt konnte ich nicht das gewünschte Ergebnis erreichen. Ich möchte meinen Header nach rechts ausgerichtet haben und den Rest des Inhalts auf der linken Seite des Headers ausrichten. Gibt es eine Möglichkeit, dies zu tun, rein CSS und ohne manuelle Angabe der Offset?

<table class="table"> 
 
    <thead> 
 
    <tr class="text-uppercase"> 
 
     <th> 
 
     <h4>BlaBla</h4> 
 
     </th> 
 
     <th class="text-right"> 
 
     <h4>BlaBlaBlaBlaBlaBlaBlaBla</h4> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Table cell</td> 
 
     <td class="text-right">Table cell</td> 
 

 
    </tr> 
 
    <tr> 
 
     <td>Table cell</td> 
 
     <td class="text-left">Table cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Table cell</td> 
 
     <td><span style="position:relative; color: red; left: 185px;">Desired</span> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

Wenn Sie den linken Rand Ihres <span> rechts von seinem übergeordneten Element auszurichten, wollen aber nicht zu hart Code die erforderliche left Offset Zu einem Pixelwert können Sie stattdessen einen Prozentwert verwenden.

Ein Prozentwert für ist relativ zur Breite des Containers <span>, die der Länge der Kopfzeile entspricht. In diesem Fall möchten Sie left:100% (Offset nach links um 100% der Containerbreite, aka. Ganz rechts auf den Container geschoben).

wird diese CSS arbeitet, unabhängig von der Länge des Headers (und durch Erweiterung, die Breite der <span> ‚s Container) verwendet, da es ein relativ eher als fester Wert für den Offset:

<table class="table"> 
 
    <thead> 
 
    <tr class="text-uppercase"> 
 
     <th> 
 
     <h4>BlaBla</h4> 
 
     </th> 
 
     <th class="text-right"> 
 
     <h4>BlaBlaBlaBlaBlaBlaBlaBla</h4> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Table cell</td> 
 
     <td class="text-right">Table cell</td> 
 

 
    </tr> 
 
    <tr> 
 
     <td>Table cell</td> 
 
     <td class="text-left">Table cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Table cell</td> 
 
     <td><span style="position:relative; color: red; left: 100%">Desired</span> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Hoffe, das hilft! Lass es mich wissen, wenn du irgendwelche Fragen hast.