Выравнивание элементов в таблице

[Igorewa]

Доброго времени суток уважаемые форумчане. В таблице, при адаптации для маленьких разрешений не знаю как выровнять текст. Разница в 1 символ, но визуально они стоят криво, хотелось бы их расположить один над одним. Прошу подсказать. Заранее благодарен. код

[Switch74]

ужас у вас там
https://jsfiddle.net/m172nr3b/2/
 

[Igorewa]

30 минут назад, Switch74 сказал:

ужас у вас там
https://jsfiddle.net/m172nr3b/2/
 

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

[SelenIT]

Довольно странно использовать табличную разметку для данных, табличность которых под большим вопросом, и при этом отказываться от возможностей выравнивания, «автоматом» предоставляемых таблицами. Прямо по поговорке «взять билет и выйти из трамвая, назло кондуктору»:). Если уж всё равно менять display, то что мешало сделать 2 <tr>-ки, а на большом разрешении объединить их в одну строку через display:flex для неявного <tbody>, например?

Но на мой взгляд, таблица тут вообще притянута за уши. И совершенно зря не используется полезный для доступности элемент <label>. Как вариант — обернуть каждый <input> вместе с подписью в <label> и задать этому <label> display:flex, а <input>-у — margin-left:auto. И он автоматически «прибьется» к правому краю контейнера. При этом клик по любому месту всей строки будет ставить курсор в поле (удобно для юзеров с тачпадом вместо мышки и т.п.).

[Igorewa]

9 минут назад, SelenIT сказал:

Довольно странно использовать табличную разметку для данных, табличность которых под большим вопросом, и при этом отказываться от возможностей выравнивания, «автоматом» предоставляемых таблицами. Прямо по поговорке «взять билет и выйти из трамвая, назло кондуктору»:). Если уж всё равно менять display, то что мешало сделать 2 <tr>-ки, а на большом разрешении объединить их в одну строку через display:flex для неявного <tbody>, например?

Но на мой взгляд, таблица тут вообще притянута за уши. И совершенно зря не используется полезный для доступности элемент <label>. Как вариант — обернуть каждый <input> вместе с подписью в <label> и задать этому <label> display:flex, а <input>-у — margin-left:auto. И он автоматически «прибьется» к правому краю контейнера. При этом клик по любому месту всей строки будет ставить курсор в поле (удобно для юзеров с тачпадом вместо мышки и т.п.).

Таблица на самом деле здесь нужна, и я оставил лишь тот код таблицы с которым проблема...  Только представьте, сверху и снизу таблица и все элементы в ней выровнены по центру, и лишь 2 поля будут выровнены по одному из краев. А идея с лейблом и кликабельностью полезна. Это добавлю. Но вот как сделать, что бы эти 2 элемента занимали одинаковую ширину, я не знаю... Выравнивание же требуеться по центру.

п.с. Гореть в аду телефонам с маленьким разрешением... Ну какой ????? делает их с таким маленьким разрешением...

 

[SelenIT]

Только что, Igorewa сказал:

Выравнивание же требуеться по центру.

Я так понимаю, что по центру выравнивается весь контейнер формы, а в нем подписи выравниваются по его левому краю, а инпуты — по правому. Разве нет?

[Igorewa]

46 минут назад, SelenIT сказал:

Я так понимаю, что по центру выравнивается весь контейнер формы, а в нем подписи выравниваются по его левому краю, а инпуты — по правому. Разве нет?

Нет, выравнивается содержимое ячейки по центру, а из за того что содержимое этих ячеек разниться по ширине, смотрится это криво и убого. Поставить 3 точки перед первым интпутом помогают добиться того что хочу, но это не вариант.

Edited November 27, 2017 by Igorewa

[SelenIT]

46 минут назад, Igorewa сказал:

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

Так зачем делать выравнивание, которое смотрится криво и убого, а потом пытаться исправить его костылями? Когда можно изначально и надежно выровнять как надо?

[Igorewa]

Подскажите пожалуйста на примере как это сделать правильно? желательно на примере.

[Switch74]

https://jsfiddle.net/m172nr3b/3/