Question

This is my code.

 <table id="addComments" style="width:430px; table-layout:fixed; display:none; padding-right:3px; padding-left:3px;">

                <tr>
                <td colspan="3">
                <textarea  id="textArea" rows="15" cols="0" style="width:430px; overflow:hidden;"></textarea>
                </td>
                </tr>

                <tr> 

                <td>
                <div id="noComments" style="color:red; display:none;">Please write your comments.</div>
                </td>

                    <td>   
                here is some image whose display is none
                    </td>

                <td> 
                <input id="commentBtn" type="button"  onclick="getTxt()" value="Add Comments"  class="button default bt-large"/>
                </td>

                </tr>

              </table>

In which row 1 is colspan and in row 2 there are three columns in which 2 columns are display none when one of the hidden column visible the first row extends automatically please any solution

Answer 1

You are already having a div to display the message. get rid of the 3 columns and just use a single column. Show/hide column doesn’t work nice in browsers. For image and button, just mention display: inline-block.