CODEWITHSUNDEEP
htmlcss
Shelby115
Shelby115

Reputation: 2867

html table white-space: nowrap not working?

I have a KnockoutJS template that creates a input[type=text] and a select next to each other with no <br/> inbetween. However it puts a linebreak between even with white-space: nowrap; I'm currently testing in chrome.

CSS:

table.grid tbody tr td {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    white-space: nowrap;
    vertical-align: top;
}

Question: Why isn't white-space: nowrap; not working? Is there a fix to this or a way around it?

Upvotes: 1

Views: 7254

Answers (2)

Vitox
Vitox

Reputation: 4424

I had a div inside my td. Inside the div had 2 button. Even with white-space:nowrap, display:inline-block and position:relative applied to all these elements it did still wrapped.

For me what did the trick was removing a float:left that was being applied to the buttons, from another class, since it "kind of force" the browser to act as those elements were display:block.

Upvotes: 0

SW4
SW4

Reputation: 71170

As noted above, this may be due to either/both your input and/or select elements being set to display at block level using display:block which will force them onto a 'new line' instead of displaying inline and following through with the anticipate nowrap behaviour

Demo Fiddle

Upvotes: 2

Related Questions