CSS Установка ширины текстовой области на 100%

#html #css

#HTML #css

Вопрос:

У меня есть текстовая область внутри тега TD, и я хочу установить ширину текстовой области на 100%, чтобы ширина совпадала с шириной TD.

Я использовал:

 textarea{width:100%}

Но это не сработало.

У кого-нибудь есть идеи, почему это не работает, пожалуйста?

Спасибо

1. "it didn't work" это крайне бесполезное описание проблемы. Что в этом плохого, из-за чего вы говорите, что это «не работает»?

2. Работает в этом скрипте … трудно сказать, почему это не работает в вашем случае без дополнительной информации. Возможно, мешает другой стиль?

3. @optus: ты установил ширину для своего td, мошенник 😉 Я думаю, что @Satch3000 забыл об этом.

Ответ №1:

Проблема, насколько я могу думать, в том, что ваша текстовая область хочет получить свою ширину (100%) из td , в котором она находится. Но a td по умолчанию имеет динамическую ширину, поэтому, если вы не укажете ширину вашей td , вы не получите, чтобы текстовая область занимала 100% вашей ячейки.

Ячейка сама по себе не имеет ширины, хотя вы могли бы подумать, что она автоматически масштабируется вместе с вашей таблицей. Ну, это не так, потому что это автоматическое масштабирование определяется содержимым внутри него. Таким образом, содержимое 100% интерпретируется неправильно, потому что 100% зависит от ширины td , которая сама по себе является динамической.

И я могу продолжить цикл с этим ответом следующим образом…

Ответ №2:

Вы закрыли тег textarea? Работает следующее:

 <html>
<head>
</head>
<body>
<table style="width:500px;border:1px solid red"><tr><td>
<textarea style="width:100%"></textarea>
</td></tr></table>
</body>
</html>

1. Почему это работает только тогда, когда я использую встроенный css? Я хотел бы установить для всех текстовых областей значение 100%, но работают только встроенные стили.

2. Вероятно, потому, что другой класс CSS более специфичен . Настройка style атрибута напрямую в значительной степени наиболее специфична.

3. Вы также можете попробовать переопределить более конкретные селекторы: textarea{ширина: 100%!важно}

Ответ №3:

Попробуйте

 -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;