Resize a table cell using css resize:both; not working with table

Question

Resize a table cell using css {resize:both;} not working with table

I need to resize table and its cell, resize able using css , css {resize:both;} is working in div but not in table tags

<table border="1" style="resize:both;">
<tr>
<td>hi table</td>
<td>hi div</td>
</tr>
<tr>
<td>hi table</td>
<td>hi div</td>
</tr>
<tr>
<td>hi table</td>
<td>hi div</td>
</tr>
</table>

can any body help

Answer 1

To cover Chrome and Safari, use

th, td { resize: both; overflow: auto; }

Do not set initial width on the table as a whole. You can set the widths of cells or columns, though.

To cover Firefox as well, I’m afraid you would need to wrap the content of each cell on a div with a class and add the corresponding class selector to the rule above. And this would introduce two resize handles on Chrome and Safari in each cell... so maybe you should use

<td><div class=cell>...</div></td>

for every cell and the CSS rule

.cell { resize: both; overflow: auto; width: 100%; height: 100%; }

(without making td elements resizable).

This way, all cells are resizable, so the table as a whole is indirectly resizable (as long as you do not set its width and height).

In principle, resize applies to all elements with overflow property other than visible. In practice, it works in a much more limited way, and differently in different browsers.

Answer 2

It appears that resize: is not applicable to tables.

table {
    border:2px solid;
    padding:10px 40px; 
    width:300px;
    resize:both;
    overflow:auto;
}​

http://jsfiddle.net/Kyle_/q4qwp/

But you can wrap the table in a div and set the resize: to the div instead, but you cannot shrink the table even with % width values.

http://jsfiddle.net/q4qwp/3/

Answer 3

To resize tables and table columns you have to use Javascript. There are several jQuery plugins out there doing so, for example colResizable, which allows you to drag column anchors manually.

Here is a small snippet of code:

$("#tabe").colResizable({}); 

you can find more examples on: http://www.bacubacu.com/colresizable/ or you can try this fiddle: http://jsfiddle.net/euka4rm3/

Answer 4

you can use styles of the outer div to change position of the table. For example

<div style="resize:both">
    <table id="sample table"></table>
</div>