User alterable column/row sizes with IE

Csaba2000 · Aug 26, 2003

I'd like to know if it's possible to have
a drag style mechanism (or other simple
way) in which to alter the width of a
specific column or height of a specifi row
in a table.

For example, in the code below, if on my
Win 2K Pro IE 5.5 machine you click on the
border of the table, and then click and drag,
you can alter the width or height of the entire
table. (If you alter the width, you my notice
that the width of the two columns maintain a
3:2 ratio).

Thanks for any tips on how to do this for columns/rows,
Csaba Gabor from New York

<DIV contentEditable>
<TABLE border=1>
<COLGROUP style="width:1in">
<COLGROUP style="width:1.5in">
<TR>
<TD>foo</TD>
<TD>bar</TD>
</TR>
<TR>
<TD>baz</TD>
<TD>borf</TD>
</TR>
</TABLE>
</DIV>

asdf asdf · Aug 27, 2003

I've had difficulty with dynamically sizing tables.

Have you considered making your cells spans with various classes?
Then you can dynamically alter the class definitions to achieve
dynamic resizing.

Csaba2000 · Aug 29, 2003

Thanks for your idea. You could take several approaches to this
problem, such as the one that Yep offered. I haven't seen any
that are 100% satisfactory, but probably some can be refined. I'd
like to be able to use the built in positioning that contentEditable
offers (since it's built in - less javascript overhead), but I've only
gotten it to work nicely for the entire table resizing. Furthermore,
Yep's approach is more widely applicable.

I offer my approach with contentEditable (only works with IE 5.5+)
below, but it's not a clean solution. If you've got an example with
your dynamic SPAN redefinitions, it would be great to see it.

Regards from New York,
Csaba Gabor

<html>
<head>
<title>contentEditable / table resizing tests</title>
<script type="text/javascript">
function prep() {
document.execCommand("2D-position",false,true);
for (var span in document.getElementsByTagName("SPAN"))
span.contentEditable = true;
}
</script>
</head>
<body style="margin:5%" onLoad="prep()">
This is supposed to show how various settings affect the
alterability of table columns and rows. None of
them is satisfactory.<br>Note that frob and Hello World
have to have contentEditable explicitly declared
in the element definition to have the 2D-Position enabled.
<br>Also, note that if the <td> elements are enclosed in
<div>s instead of <span>s that there would be an
an extra space below each unless height was set to 100%
(which would disable row resizing).<br> 
<div contentEditable style="border:dashed 2px gold">
<table border=1>
<tr>
<td><span style="background-color:red;height:100%">foo</span></td>
</tr><tr>
<td><span style="background-color

range;width:100%">bar</span></td>
</tr><tr>
<td><span style="background-color:yellow;height:100%;width:100%">baz</span></td>
</tr><tr>
<td><span style="background-color:green">frob</span></td>
</tr>

<tr>
<td style="height:2.46em"><span style="background-color:blue;height:100%">Hi Mom</span></td>
</tr><tr>
<td style="height:2.46em"><span style="background-color:indigo;width:100%">Hi Dad</span></td>
</tr><tr>
<td style="height:2.46em"><span style="background-color:violet;height:100%;width:100%">Hi Bro</span></td>
</tr><tr>
<td style="height:2.46em"><span style="background-color:silver">Hello World</span></td>
</tr>

</table></div></body></html>

Csaba2000 · Aug 29, 2003

Hi Yep,

Thanks for your reply and example. You have some neat
techniques in your coding. I've had a project on the back
burner for a while that needed to have editable cells (so
IE 5.5+ only) where the size adapted with 1 or 2 rows (scroll
bars if necessary). I had presumed that if I could do that,
then I would make no other demands on my system. Now
that my main problem is solved (through the wonderful
observation of Richard Cornford at
http://groups.google.com/groups?th=6397c6ac32865f50
in an earlier post) I realize once again that I have been
deluding myself. The original (and still current) approach
is to do what you suggest in allowing the user to enter
specific dimensions in some form field.

But I would love to put in column/row resizing via mouse
(because it will allow the user to be more efficient). And from
what I've seen so far, your approach is the one I like the most.
I think I should just ensure that the cursor changes to a hand
when it's over a border and somehow account for changing the
entire table width/height vs final column width/row height.

Another approach I thought of which I haven't been able
to make work cleanly uses contentEditable and is illustrated
under my response to "asdf asdf"within this thread.

Best regards from New York,
Csaba Gabor

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Need help with <rowspan> in an HTML table	1	Nov 6, 2024
Having trouble centering contents of td ?	3	May 2, 2023
Image shifts to the right when export the page to pdf	4	May 5, 2023
Nested Loop Insert Page Break	1	Nov 5, 2021
Sort by number of characters	1	Nov 2, 2023
Help needed with thank you message	5	Sep 11, 2021
Can someone pls help me with a little algorithm script	1	Nov 28, 2024

User alterable column/row sizes with IE

Csaba2000

asdf asdf

Csaba2000

Csaba2000

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads