CODEWITHSUNDEEP
htmlcss
Emdadul Haque
Emdadul Haque

Reputation: 98

align numbers horizontally center-right

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)

Upvotes: 3

Views: 913

Answers (4)

PirateApp
PirateApp

Reputation: 6230

I went through the same problem and came across the following suggestions which I dont find to be optimal

  1. Use extra padding on both sides of the column (what about responsiveness?)
  2. Use extra columns (semantics anyone?)
  3. Put a table inside a td (performance anyone?)

After going through every nook and corner, I believe I have the optimal solution to this problem Flexbox to the rescue!!!

Simple trick: Just add a span inside a td that acts as a flexbox container and has 2 span children with both your content pieces inside. Your column could be any size and this still works like a charm! 

<style>
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: sans-serif;
}
html, body{
    width: 100vw;
    min-height: 100vh;
}
body{
    display: flex;
    flex-direction: column;
}
#content{
    flex: 1;
    display: flex;
    flex-direction: row;
}
#left, #right{
    flex: 2;
}
#center{
    flex: 6;
}
table{
    border: 1px solid #ddd;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
}


table th,
table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #e9ecef;
}

table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #e9ecef;
}

td{
    text-align: center;
}
span.left{
    flex: 1;
    background: lightcoral;
    text-align: right;
}

span.right{
    flex: 1;
    background: lightblue;
    text-align: left;
}

.flexwrap{
    display: flex;
    flex-direction: row;
}
</style>
<body>
    <div id= "content">
        <div id = "left"></div>
        <div id = "center">
            <table>
                <thead>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                    <th>Column 4</th>
                    <th>Column 5</th>
                    <th>Column 6</th>
                    <th>Column 7</th>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>Item 1</td>
                        <td>
                            <span class="flexwrap">
                                <span class = 'left'>
                                    13737
                                </span>
                                <span class = 'right'>
                                    .9
                                </span>
                            </span>
                        </td>

                        <td>Table Cell</td>
                        <td>Table Cell</td>
                        <td>Table Cell</td>
                        <td>Table Cell</td>
                    </tr>

                    <tr>
                        <td>
                            1
                        </td>
                        <td>Item 2</td>
                        <td>
                            <span class="flexwrap">
                                <span class = 'left'>
                                    2
                                </span>
                                <span class = 'right'>
                                    .34000004
                                </span>
                            </span>
                        </td>

                        <td>Table Cell</td>
                        <td>Table Cell</td>
                        <td>Table Cell</td>
                        <td>Table Cell</td>
                    </tr>
                </tbody>
            </table>        
        </div>
        <div id = "right"></div>
    </div>
</body>

I colored the spans so that you can see them in the output. Hope that helps

enter image description here

Upvotes: 0

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13546

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.

Upvotes: 0

jack
jack

Reputation: 1391

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.

Upvotes: 1

jack
jack

Reputation: 1391

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>

Upvotes: 4

Related Questions