Я установил высоту моего текстового поля на 500%, но по какой-то причине он не меняется на 500%. Я думаю, что это как-то связано с тем, что он находится внутри стола, но я не уверен, что нужно правильно изменить высоту. По какой-то причине ширина текстовой области МОЖЕТ быть изменена внутри таблицы.

table,td {
border: 1px solid black;
}
textarea {
resize: none;
width: 100%;
height: 500%;
}
<table> 
<tr>

<td> 
firstTD 
</td> 

<td>
<form method = 'POST' action = 'updateProfile.php'>
<textarea id = 'textarea' placeholder = 'type something here...' onfocus = \"this.placeholder = ''\" onblur = \"this.placeholder = 'type something here...'\" maxlength = '10000'></textarea>
</form>
</td>

</tr> 
</table>
1
frosty 16 Дек 2015 в 03:19

3 ответа

Лучший ответ

Другой ответ решает проблему, но не объясняет ее. Когда вы используете% для определения ширины / высоты в CSS, вы делаете это независимо от% ширины / высоты контейнера этого элемента.

Когда вы устанавливаете текстовую область равной 100% от пустой <td>, она не будет очень большой.

Установка его в положение: абсолютный будет работать, если ни один из элементов-предков не расположен. Более простой подход состоит в том, чтобы просто использовать что-то отличное от%, чтобы определить вашу ширину и высоту. Попробуйте width:10em; и настройте его, пока вы не сделаете все правильно.

Изменить.

Чтобы ответить на вопрос в комментариях: в этом случае работает% для определения высоты, потому что пустая ячейка имеет высоту, но не ширину. Пустая ячейка таблицы все еще наследует высоту строки, которая равна высоте самого высокого <td>. В этом случае есть еще один <td>, у которого есть содержимое, задающее высоту ячейки.

Итак, если бы была другая строка, и у одной из ячеек в том же столбце было содержимое, то ширина также работала бы с%.

Тем не менее, не рекомендуется использовать% для ширины и высоты в таблице, потому что при изменении содержимого в таблице ваш процент будет меняться. Кроме того, когда вы используете% в отличие от px или em, он не будет растягивать родительский контейнер.

Изменить снова

Я, честно говоря, даже не заметил элемент формы. Тогда ваши проценты относятся к высоте / ширине элемента формы, а не к <td>. Должны быть некоторые отступы, задающие ширину / высоту ваших ячеек, но форма не будет иметь никаких размеров.

1
I wrestled a bear once. 16 Дек 2015 в 01:14

Попробуйте установить position: absolute в textarea и передать position: relative родителю. Также удалите width и задайте значения left и right как 0. Но помните, это приведет к переполнению textarea содержимого. Это то, что вы ожидаете?

table,
td {
  border: 1px solid black;
  position: relative;
  width: 350px;
}
textarea {
  resize: none;
  height: 500%;
  left: 0;
  right: 0;
  position: absolute;
  top: 0;
}
<table>
  <tr>
    <td>
      firstTD
    </td>
    <td>
      <form method='POST' action='updateProfile.php'>
        <textarea id='textarea' placeholder='type something here...' onfocus=\ "this.placeholder = ''\" onblur=\ "this.placeholder = 'type something here...'\" maxlength='10000'></textarea>
      </form>
    </td>
  </tr>
</table>

Или если вам нужно что-то подобное?

table,
td {
  border: 1px solid black;
  position: relative;
  width: 350px;
}
textarea {
  resize: none;
  height: 10em;
  width: 100%;
  display: block;
  box-sizing: border-box;
}
<table>
  <tr>
    <td>
      firstTD
    </td>
    <td>
      <form method='POST' action='updateProfile.php'>
        <textarea id='textarea' placeholder='type something here...' onfocus=\ "this.placeholder = ''\" onblur=\ "this.placeholder = 'type something here...'\" maxlength='10000'></textarea>
      </form>
    </td>
  </tr>
</table>
0
Praveen Kumar Purushothaman 16 Дек 2015 в 00:27

При этом вы можете установить размер для текстовой области

$("textarea").css("height", $("textarea").parent("td").height())
.css("width", $("textarea").parent("td").width())
0
ashkufaraz 11 Мар 2020 в 04:52