CSS Setting Textarea width to 100%

Question

I have a Textarea inside a TD tag and I want to set the textarea width to 100% so the width is the same as the TD width.

I've used:

textarea{width:100%}

But it didn't work.

Anyone have any ideas why it's not working please?

Thanks

Solution

The problem is, as far as I can think of: that your textarea wants to get its width (100%) from the td it is in. But a td has a dynamic width by default, so unless you don't specify the width of your td, you won't get your textarea to be 100% of your cell.

A cell has no width by itself, even though you would think it will autoscale with your table. Well, it doesn't, because this auto scaling is determined by the content inside it. So content of 100% is not interpreted correct, because the 100% depends on the width of the td which is dynamic by itself.

And I can continue looping with this answer like this...

Comments

[thirtydot]

"it didn't work" is a highly useless description of the problem. What's wrong with it that's making you say it's "not working"?

[Adam Price]

Works in this fiddle... hard to tell why it doesn't work in your case without more details. Perhaps another style is interfering?

[Marnix]

@optus: you have set a width to your td, cheater ;) I think that @Satch3000 forgot that one.

[Satch3000]

Why does it only work when I use inline css? I would like to set all textarea's to 100% but only inline styles are working.

[Adam Price]

Probably because a different CSS class is more specific. Setting the style attribute directly is pretty much the most specific.

[lod3n]

You could also try overriding more specific selectors: textarea{width:100%!important}