Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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

like image 637
Akhilraj N S Avatar asked Nov 16 '12 07:11

Akhilraj N S


4 Answers

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.

like image 73
Jukka K. Korpela Avatar answered Oct 19 '22 14:10

Jukka K. Korpela


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/

like image 42
Kyle Avatar answered Oct 19 '22 13:10

Kyle


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/

like image 2
Alvaro Prieto Avatar answered Oct 19 '22 12:10

Alvaro Prieto


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>
like image 1
Xavier Avatar answered Oct 19 '22 14:10

Xavier