victor victor - 1 month ago 4x
HTML Question

Expanding <TD> causes content to wrap to next line

My problem is that content inside a

will wrap to next line instead of expanding the parent table. I can't understand what would be the limit at which the
stops expanding.

What I want is to prevent content to jump onto next row.
The problem is described here

  • Press 'Add' several times.

  • the table keeps expanding up the point it reaches the width of the screen (OK)

  • Pressing 'Add' again will cause the 'V' link to jump to next row, right under the input button ( NOK )

  • Pressing 'Add' again will cause the
    to expand beyond the limit of the screen ( NOK - correct to expand but without the 'v' link sliding to the next row )

Really looking forward to opinions.


To prevent "V" link to jump to next row, simply add white-space: nowrap to td.

white-space defines what to do, when browser meets some whitespace (space, tab, etc). If we set it to nowrap, browser will not wrap our content if there will be not enought space.

When the table expand beyond boundaries, the "V" is collapsing to next row, because of no space.

in your css add:

td {
  white-space: nowrap;