Выравнивать текст в таблицах Bootstrap в пределах одной ячейки данных

Question

Iam, используя Bootstrap3 и Django. В таблице я хочу выровнять некоторые данные и их единицы.

Позволь мне нарисовать вам картину:

+-----+-------------+ 

|Text | Data + Unit | 

+-----+-------------+ 

| Foo | 1000 Bars | 

+-----+-------------+ 
|Foo2 | 500 Fobars | 
+-----+-------------+ 

Места в данном должно выровнять, но блоки имеют различные длины обугленных. я закончил с

<td class="text-right"><dd>{{f.data}}</dd> {{f.units}} 

Который дает мне linebreake внутри клетки. Я также попытался добавить немного дополнительной таблицы в ячейку, но это не сработало.

Мне нужно что-то вроде табулятора, но я окутаю знание html и css, чтобы задать правильный вопрос.

Как Вы думаете бы об этом в решении проблемы?

Answer 1

Существует множество способов исправить это. Самым простым было бы установить dd как для отображения в виде встроенных блоков.

Вы должны предоставить таблицу, td или сам dd класс и применить дисплей: встроенный блок к нему и дать ему заданную ширину (достаточно широкую для самых длинных единиц). Смотри ниже.

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

и CSS

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