'Textarea 100% height inside td by css

I want this textarea to be fit inside the table row, by its height & width, so I have used height: 100%; width 100%; on textarea and my decided height width on td. Now textarea's width is ok, but height is not 100%, I am working hard with bellow code ~

Check Image

<style>
body {text-align:center;font-family:Arial;font-weight:400;font-size: 16px;}
table {width:100%;text-align:center;border-collapse: separate;border-spacing: 15px 5px;}
td{padding:20px; box-shadow: 0px 0px 20px #e7e7e7; background-color: #fff;}
textarea{
width:100%;
height:100%;
 resize: none;
}
</style>

<table>
   <tr>
      <td rowspan='2' style='height: 78vh;width: 30%; line-height: 28px;'>   Layout - 1
      </td>
      <td rowspan='2' style='width: 40%;'>
         Layout - 2
      </td>
      <td height='42%' style='width: 30%;'>
         <textarea style='height:100% width:100%'></textarea>
      </td>
   </tr>
   <tr>
      <td height='42%'>
          <textarea style='height:100% width:100%'></textarea>
      </td>
   </tr>
</table>

But not working, help! How to make 100% height of textarea inside a td? Please do not suggest rows="--" attribute.

htmlcsshtml-tabletextarea


Solution 1:[1]

Here's something:

td textarea 
{
    width: 100%;
    height: 100%
}
<table border="1">
   <tr>
      <td rowspan='2'>   
        Layout - 1
      </td>
      <td rowspan='2'>
         Layout - 2
      </td>
      <td style="height:400px">
         <textarea></textarea>
      </td>
   </tr>
   <tr>
      <td style="height:100px">
          <textarea></textarea>
      </td>
   </tr>
</table>

I made the cells different heights on purpose so you can see that it is in fact stretching out to 100%.

Solution 2:[2]

You could do box-sizing: border-box; in CSS to make sure that it counts the entire textarea with its content, padding, and border, as part of its width and height. Also make sure to change the rows and cols attribute of the actual textarea to make sure that it becomes bigger.

Solution 3:[3]

There is a simple and sweet trick. Set textarea position as absolute while top and left are 0, then set td position as relative. That's all.

In this case you are not enforced to set a certain height in px for td or textarea.

body {text-align:center;font-family:Arial;font-weight:400;font-size: 16px;}
table {width:100%;text-align:center;border-collapse: separate;border-spacing: 15px 5px;}
td{
  padding:20px;
  box-shadow: 0px 0px 20px #e7e7e7;
  background-color: #fff;
  position: relative
}
textarea{
  width:100%;
  height:100%;
  resize: none;
  position: absolute;
  top: 0;
  left:0;
}
<table>
   <tr>
      <td rowspan='2' style='height: 78vh;width: 30%; line-height: 28px;'>   Layout - 1
      </td>
      <td rowspan='2' style='width: 40%;'>
         Layout - 2
      </td>
      <td height='42%' style='width: 30%;'>
         <textarea></textarea>
      </td>
   </tr>
   <tr>
      <td height='42%'>
          <textarea></textarea>
      </td>
   </tr>
</table>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dazed-and-confused
Solution 2
Solution 3

Related Questions