align numbers horizontally center-right

user_7572802 0
Viewed 614

I'm trying to accomplish align numbers horizontally center in the box but with the digits right aligned like in this image:

Center align with right align of digits

If you think i should try different method please suggest me.

* {
    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>

Number will be dynamic (Between one to four characters)

css html
4 Answers

I added borders so you can see how I did it.

Align the td content to center.

Align the td > span content to right, at give it small width.

* {
    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>

user_45484130

In addition to the solution above, I have to say that for this case, it could be a good idea to use a monospace font.

user_45484130

Another option that doesn't need setting explicit size (so will work with any font and/or digits number):

* {
    margin:0;
    padding:0;
}

.table{
    width: 70px;
    border-collapse: collapse;
    border-width: 0;
}
tbody tr:nth-child(odd) { background: #eee; }
th,td {
    padding: 2px 5px 2px 5px;
    text-align: right;
}
tbody tr::before, tbody tr::after {
    content: '';
    display: table-cell;
    width: 50%;
}
<html>
<head>
    <link rel="stylesheet" href="check.css">
</head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th colspan="3">Numbers</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>8</td>
                </tr>
                <tr>
                    <td>9</td>
                </tr>
                <tr>
                    <td>10</td>
                </tr>
                <tr>
                    <td>11</td>
                </tr>
                <tr>
                    <td>12</td>
                </tr>
            </tbody>
        </table>

    </body>
</html>

The trick is in adding two "pseudo cells" to each row that take half the available width each.

user_25332150
Related