4

Существует возможность средствами HTML+CSS выравнить в таблице, в теге TD числа по определенному знаку (по точке или запятой)? Например:

----
  153.12
   98.357
  753.00
    0.002
   15
32145.9998   
2
  • можно схитрить при выводе массива чисел (реформация), но там необходимо использовать php; можно использовать js, но это воможно приведёт к скачкам вёрстки. Что выбираете?
    – Kirill
    13 дек 2017 в 23:06
  • @kirill-korushkin PHP и так используется, потому без проблем подойдет вариант. JS вариант тоже допустимый, но в таблице используется еще и сортировка по полям, без перегрузки страницы, потому лишь бы не было конфликтов, так как по этим числовым полям еще будет осуществляться сортировка.
    – AlexMaxTM
    14 дек 2017 в 7:34

2 ответа 2

6

Ну почти ))) Через data- атрибуты.

div {
  position: relative;
  margin-left: 3em;
}

div::before {
  content: attr(data-before);
  text-align: right;
  width: 5em;
  position: absolute;
  left: -5em;
}

div::after {
  content: attr(data-after);
  position: absolute;
}
<div data-before="153" data-after="12">.</div>
<div data-before="98" data-after="357">.</div>
<div data-before="753" data-after="00">.</div>
<div data-before="0" data-after="002">.</div>
<div data-before="15" data-after="">&nbsp;</div>
<div data-before="32145" data-after="9998">.</div>

3
  • Спасибо. Интересное решение, но не подойдет для таблиц в которых еще осуществляется сортировка средствами JS по этому полю без перегрузки страниц.
    – AlexMaxTM
    14 дек 2017 в 7:37
  • @AlexMaxTM Подойдёт )) просто для сортировки надо третий атрибут завести с целой датой, и сортировать уже по нему. 14 дек 2017 в 10:47
  • Но минус у этого решения в том, что выделить число теперь нельзя. 14 дек 2017 в 10:48
3

Делается разбиением данных на две части. А сортировка делается по атрибуту data. Плюсом этого решения является то что данные можно копировать через выделение.

.start {
  display: inline-block;
  width:50px;
  text-align:right; 
}
<div class="myrow" data="123.01">
     <span class="start">123</span>.01
</div>
<div class="myrow" data="1.122">
     <span class="start">1</span>.122
</div>
<div class="myrow" data="22.1">
     <span class="start">22</span>.1
 </div>
<div class="myrow" data="12345.111">
     <span class="start">12345</span>.111
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.