[Answer]-Align Text in Bootstrap Tables within the same Data Cell

by

1👍

✅

There are lots of ways to fix this.. The simplest would be to set the dd’s as to display as a inline-blocks.

You would give the table, td or the dd itself a class and apply display: inline-block to it and give it a set width (wide enough for the longest units). See below.

<table class="data">
    <tr>
        <th>Text</th>
        <th>Data + Unit</th>
    </tr>
    <tr>
        <td>Foo</td>
        <td><dd>1000</dd>Bars</td>
    </tr>
    <tr>
        <td>Foo2</td>
        <td>
            <dd>500</dd>FoBars
        </td>
    </tr>
</table>

and the css

.data dd {
    display: inline-block;
    margin-right: 6px;
    width: 60px;
    text-align: right;
}
👤Legin76

Leave a comment