Quick CSS Tips

How to disable resize property of textarea

Sometimes it seems very frustrating to keep textarea in resizable mode. You can disable this property very easily by simple CSS rule.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
To disable resizable in all textareas in a page, use
textarea {
    resize: none;
}

To disable resizable in selected textareas via ID in a page, use
#textareaId{
    resize: none;
}

To disable resizable in selected textareas via Name in a page, use
#textarea[name="text"]{
    resize: none;
}

How to apply Cellpadding and Cellspacing in CSS

In HTML, we have seen the table styles cellpadding and cellspacing can be set as

1
<table cellspacing="1" cellpadding="1">

. But how would this be accomplished using cascading style sheet?

The way of doing this is very simple and can be achieved as for “cellpadding” , we can simply use padding on table cells. E.g. for 15px of “cellpadding”:

1
2
3
4
5
6
7
8
9
10
11
td { 
    padding: 15px;
}

For "cellspacing", we can apply the border-spacing property to the table. E.g. for 15px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

Handling IE <= 7

These CSS properties will work in almost all major browsers except for Internet Explorer basic up till Internet Explorer 7. You can use border-collapse:collapse. Only if we want 0 cellspacing and our table doesn’t have it defined already.

1
2
3
4
table { 
    border-spacing: 0;
    border-collapse: collapse;
}
Share:

Related Articles:

This entry was posted in CSS, Resources and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>