Интервал между ячейками, разбитый пробелом: nowrap

Question

У меня есть таблица, в которой каждая ячейка содержит текстовый ввод. Рядом с текстовым вводом у меня есть пролет. Я бы хотел, чтобы этот диапазон сидел над правой рукой в ​​качестве ярлыка.

HTML-структура для каждой ячейки просто:

<td> 
    <div> 
     <input type="text" /> 
     <span>A</span> 
    </div> 
</td> 

Если я не оставляю пустое пространства между входом и пролетом, он на самом деле работает так, как я хотел бы, но я предпочел бы не сделать массивная длинная строка в моем HTML (таблица 3 в jsfiddle).

Я добавил разрыв строки, который, очевидно, пошел плохо (таблица 2), когда диапазон затем переходит на следующую строку.

Я понял, что могу исправить это, применив nowrap к div, но это также сильно пошло (таблица 1), так как по какой-то причине я не понимаю, что размеры ячейки таблицы больше не верны.

Мои вопросы: почему это происходит, и как лучше всего это исправить?

https://jsfiddle.net/e01azjoc/

Answer 1

Кто вам сказал, чтобы положить margin-left: -1; ваши span для того, чтобы исправить что-нибудь?
Позиция absolute должна использоваться для SPAN внутри позиции relative родительском div

Теперь этот пример работает так же для каждой клетки Demo

.inputCell {   /* The DIV inside your TD */ 
    position:relative; 
} 

.cellLabel {  /* The SPAN to overlay INPUT */ 
    position:absolute; 
    top:3px; 
    right:3px; 
} 

Кроме того, так как я полагаю, должен быть в состоянии для ввода некоторого текста внутри этих входов, вы явно не хотите, чтобы SPAN "A" накладывал текст любого ввода. В этом случае добавить правый отступы на вход - это позволит вам, что текст пролета в никогда не перекрывает входное значение (что делает его нечитаемым)

---

Честно говоря, я хотел бы предложить вам просто оставить пролеты NEXT-TO INPUTS, просто удалите входные границы. Demo