CSS в столбце таблицы (td): выравнивание по правому краю, но с отступом влево - PullRequest
Новая
       18

CSS в столбце таблицы (td): выравнивание по правому краю, но с отступом влево

0 голосов
/ 06 ноября 2018

Мне нужно отобразить числа в html-таблице и предпочесть выровнять их по правому краю, но числа должны быть размещены слева от ячейки, например: 

Header A  |Header B  |
 -1       |5000      |
  1       | -20      |
100       |   1      |

Ширина столбца является динамической, шрифт похож на Arial. Я не могу ничего изменить в html (div, colgroup, ..), ни использовать Javascript, но только прикрепить класс CSS к td.

Я пытался использовать calc(100% - 25px), но, к сожалению, 100% это ширина таблицы, а не столбца.

Пожалуйста, смотрите мой пример здесь: http://jsfiddle.net/mwtL9cde/4/ (Я положил там 50px отступ)

1 Ответ

0 голосов
/ 06 ноября 2018

Единственное, что вы можете сделать, - это использовать фиксированную ширину для ваших ячеек в сочетании со значениями padding-right, которые вы получаете методом проб и ошибок, как в следующем фрагменте (также обратите внимание box-sizing: border-box, чтобы включить заполнение в фиксированная ширина)

Но, конечно, это не динамично и не будет автоматически адаптироваться к другим значениям. 

table {
width: 400px;
}
td {
  width: 200px;
    text-align: right;
    box-sizing: border-box;
}
td:first-child {
    padding-right: 122px;
    background-color: yellow;
}

td:nth-child(2) {
    padding-right: 162px;
    background-color: red;
}
<table>
    <colgroup span="2"></colgroup>
    <tr>
        <td class="firstColumn">-280</td>
        <td class="secondColumn">100</td>
    </tr>
    <tr>
        <td class="firstColumn">100</td>
        <td class="secondColumn">1</td>
    </tr>
    <tr>
        <td class="firstColumn">-1</td>
        <td class="secondColumn">200</td>
    </tr>
    <tr>
        <td class="firstColumn">123412345</td>
        <td class="secondColumn">-280</td>
    </tr>
</table>
...