Databases
StackOverflow2013
Postsdbo
POHow to expand/decrease height of table cell?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to expand/decrease height of table cell?
    text
    copied!<p>Got a Jsfiddle where I have a textarea which fills a table cell. But what I need help with is can somebody create a function in the fiddle where the user expands or decrease the size of the table cell. I want to test my css to see if the textarea can fill the textarea if the table cell height is increased or decreased?</p> <p>Here is the fiddle: <a href="http://jsfiddle.net/BpWes/1/" rel="nofollow">http://jsfiddle.net/BpWes/1/</a></p> <p>Below is the code from fiddle:</p> <p>HTML:</p> <pre><code> &lt;table id="tbl"&gt; &lt;tr&gt; &lt;th&gt;Question&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="question"&gt; &lt;textarea class="textAreaQuestion" id="mainTextarea" name="questionText"&gt;&lt;/textarea&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>Jquery:</p> <pre><code>$('textarea').css('background','#EAEAEA'); </code></pre> <p>CSS:</p> <pre><code>td{ vertical-align:top} #tbl{ border:1; height:250px; } .question{ border:1px black solid; padding: 0; height:100% } .textAreaQuestion{ width:100%; height:100%; border:0; padding:0; font-size:100%; margin:0; } </code></pre> <p><strong>UPDATE:</strong></p> <p>HTML:</p> <pre><code> &lt;table id="tbl"&gt; &lt;tr&gt; &lt;th&gt;Question&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="question"&gt; &lt;div class="divheight"&gt; &lt;textarea class="textAreaQuestion" id="mainTextarea" name="questionText"&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>CSS:</p> <pre><code>.question{ border:1px black solid; padding: 0; } .divheight{ height:100% } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload