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
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.
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/
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/
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With