Zahlen ordentlich untereinander darstellen

[Dragosius]

Hallo,

ich habe bei einem Spiel immer 5 2-stellige Zahlen, welche durch Bindestrich getrennt dargestellt werden.


da nicht jede Zahl gleich viel Platz braucht, sind die Zahlen nicht ordentlich untereinander.
Hat jemand eine Idee, wie ich das denn realisieren könnte?

Vielen Dank

 

[Yaslaw]

Annahme: Du haste eine Tabelle und das sind einzlene Felder davon. Dann einfach mittels css

td{
  text-align: center;
}

 

[Sprint]

Alternativ kannst du eine Mono Schrift nehmen, bei der alle Zeichen die selbe Breite haben. So wie früher die mechanischen Schreibmaschinen

 

[Sempervivum]

Noch 'ne Alternative: Jedes der Elemente in ein span packen und mit Gridlayout anordnen. Ist IMO semantisch passender als eine Tabelle und mit globalem Ersetzen hat man das HTML schnell umgeändert:

        .grid-container {
            display: inline-grid;
            grid-template-columns: auto auto auto auto auto auto auto auto auto;
        }

    <div class="grid-container">
        <span>15</span><span>-</span><span>18</span><span>-</span><span>16</span><span>-</span><span>11</span><span>-</span><span>02</span>
        <span>11</span><span>-</span><span>12</span><span>-</span><span>13</span><span>-</span><span>14</span><span>-</span><span>15</span>
    </div>

Edit: Bei näherem Hinsehen erkenne ich horizontale Linien zwischen den Zeilen. Könnte man auch mit Grid hin bekommen aber schön ist es nicht:

        .grid-container {
            display: inline-grid;
            grid-template-columns: auto auto auto auto auto auto auto auto auto;
            margin: 1em;
        }
        .grid-container span.hr {
            grid-column: span 9;
            height: 2px;
            background-color: lightgray;
            margin: 0 -1em;
        }

    <div class="grid-container">
        <span>15</span><span>-</span><span>18</span><span>-</span><span>16</span><span>-</span><span>11</span><span>-</span><span>02</span>
        <span class="hr"></span>
        <span>11</span><span>-</span><span>12</span><span>-</span><span>13</span><span>-</span><span>14</span><span>-</span><span>15</span>
    </div>

Bei Stackoverflow werden noch mehr Varianten beschrieben:
Horizontal border across entire row of CSS GRID

Oder nur die Nummern in spans packen und ihnen eine einheitliche Breite mit der Maßeinheit em geben:

        span.nr {
            width: 2em;
        }

    <span class="nr">15</span>-<span class="nr">18</span>-<span class="nr">16</span>-<span class="nr">11</span>-<span
        class="nr">02</span><br>
    <span class="nr">11</span>-<span class="nr">12</span>-<span class="nr">13</span>-<span class="nr">14</span>-<span
        class="nr">15</span>

 

[Dragosius]

Vielen Dank für die Antworten.

Da die Zahlen mit den Bindestrichen so bereits in der Datenbank gespeichert werden, habe ich mich für die Variante mit monospace entschieden: