Table cell spacing broken by white-space: nowrap

Question

I have a table where each cell contains a text input. Next to the text input I have a span. I'd like this span to sit over the text input right hand side as a label.

The HTML structure for each cell is simply:

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

If I leave no white space between the input and span, it actually works how I'd like, but I'd rather not have to make a massive long line in my HTML (table 3 in the jsfiddle).

I added a line break, which obviously went badly (table 2) as the span then goes onto the next line.

I figured I could fix this by applying nowrap to the div, but that also went badly (table 1) as for some reason I don't understand the table cell sizes are no longer correct.

My questions are: why is this happening, and what would be the best way to fix it?

https://jsfiddle.net/e01azjoc/

jsfiddle.net/77v9hjhr or jsfiddle.net/pqx1nzm3 "slow" comment — SpiRT

Roko C. Buljan Roko C. Buljan · Accepted Answer · 2015-09-10T22:21:35

Who told you to put margin-left: -1; to your span in order to fix anything?
Position absolute should be used for your SPAN inside a position relative parent div

Now this example works the same for every cell Demo

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

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

Also, since I suppose one should be able to enter some text inside those inputs, you clearly don't want the SPAN's "A" to overlay any input's text. In that case add some right padding to the input - it will allow you that the SPAN's text never overlays the input value (making it unreadable)

Frankly, I would suggest you to simply leave the spans NEXT-TO the INPUTS, just remove the inputs borders. Demo

Table cell spacing broken by white-space: nowrap

1 Answers