Richten Sie die Zahlen horizontal in der Mitte rechts aus

Emdadul Haque

Ich versuche, die Ausrichtung der Zahlen horizontal in der Mitte des Felds zu erreichen, wobei die Ziffern wie in diesem Bild rechts ausgerichtet sind:

Wenn Sie denken, ich sollte eine andere Methode ausprobieren, schlagen Sie mich bitte vor.

* {
    margin:0;
    padding:0;
}

.table{
    width: 70px;
    border-collapse: collapse;
    border-width: 0;
}
th,td {
    padding: 2px 5px 2px 5px;
    text-align: center;
}

span {
    display: inline-block;
    text-align: right;
}

<html>
<head>
    <link rel="stylesheet" href="check.css">
</head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th>Numbers</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><span>8</span></td>
                </tr>
                <tr>
                    <td><span>9</span></td>
                </tr>
                <tr>
                    <td><span>10</span></td>
                </tr>
                <tr>
                    <td><span>11</span></td>
                </tr>
                <tr>
                    <td><span>12</span></td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

Die Zahl ist dynamisch (zwischen einem und vier Zeichen).

Jack

Ich habe Rahmen hinzugefügt, damit Sie sehen können, wie ich es gemacht habe.

Richten Sie den tdInhalt auf die Mitte aus.

Richten Sie den td > spanInhalt nach rechts aus und geben Sie ihm eine geringe Breite.

* {
    margin:0;
    padding:0;
}

.table{
    width: 70px;
    border-collapse: collapse;
    border-width: 0;
}
td {text-align: center; border: 1px solid red;}
td span {
    padding: 0;
    text-align: right;
    border: 1px solid blue;
    width: 31px;
}

span {
    display: inline-block;
    text-align: right;
}

<html>
<head>
    <link rel="stylesheet" href="check.css">
</head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th>Numbers</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><span>8</span></td>
                </tr>
                <tr>
                    <td><span>9</span></td>
                </tr>
                <tr>
                    <td><span>10</span></td>
                </tr>
                <tr>
                    <td><span>1122</span></td>
                </tr>
                <tr>
                    <td><span>112</span></td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am2020-11-17

Lass mich ein paar Worte sagen

0Kommentare

LoginNach der Teilnahme an der Überprüfung

Vorheriger Beitrag:Aufteilen von Routen in mehrere Dateien

TOP Liste

Artikel

Richten Sie die Zahlen horizontal in der Mitte rechts aus

Richten Sie die Zahlen horizontal in der Mitte rechts aus

So legen Sie mit dem Interface Builder unterschiedliche führende Speicherplätze für unterschiedliche Geräte fest

Wie konvertiert man einen Datenrahmen im langen Format in eine Liste mit einem geeigneten Format?

Fügen Sie eine weitere Schaltfläche zu gwt Suggest Box hinzu

Was ist schneller: SUM über NULL oder über 0?

Wie konvertiere ich einen Vektor von Bytes (u8) in eine Zeichenfolge?

Wie kann ich in SCSS mehrere Klassen zu einer einzigen kombinieren?

Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um

So berechnen Sie die Verfügbarkeit von Anwendungen (SLA)

Eclipse Oxygen - Projekte verschwinden

Wie kann ich eine verschachtelte Schleife mit lapply in R ersetzen?

Speichern Sie ein MPAndroidChart-Diagramm in einem Bild, ohne es in einer Aktivität anzuzeigen

Python: Spalten mit demselben Namen zusammenführen, wobei der Mindestwert beibehalten wird

Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

Wie wählt man Unterschiede mit drei Tabellen aus?

Kann ich ein Tkinter-Canvas erstellen, das mehrere Zeilen in einem Text-Widget umfasst?

ElasticSearch BulkShardRequest ist aufgrund von org.elasticsearch.common.util.concurrent.EsThreadPoolExecutor fehlgeschlagen

Gruppieren Sie Datenrahmenspalten nach ihrem Datum (die Spaltentitel enthalten) und fassen Sie die Instanzen von Einsen und Nullen in R . zusammen

Wie kann ich den Kaskadenmodus global einstellen?

Ärgerliches Problem mit yaml, das ich nicht lösen kann

Wie erstelle ich einen neuen übergeordneten Knoten außerhalb der .ref (/ path) in der Firebase-Echtzeitdatenbank mithilfe von Cloud-Funktionen (Typescript)?

So erhalten Sie eine gleichmäßige Höhe für alle Eingabefelder