rogerio Posted July 30, 2012 Share Posted July 30, 2012 This table has 2 rows and I am trying to add text to the second row (see "// add text to r2.") and maintain a height of 276px but the row is expanding to the height of the text. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>create DOM table</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script> function start(objText) { var mybody = document.getElementsByTagName("body")[0]; // get the reference for the body mytable = document.createElement("table"); // creates a <table> element and a <tbody> element mytablebody = document.createElement("tbody");// creating all cells// create cell r1 c1 mycurrent_row = document.createElement("tr"); // creates a <tr> element r1 // creates a <td> element mycurrent_cell = document.createElement("td"); mycurrent_cell.setAttribute("width", "356px"); // creates a text node mycurrent_txtbox = document.createElement("img"); mycurrent_txtbox.setAttribute('src',"images/x11_title.gif"); mycurrent_cell.appendChild(mycurrent_txtbox); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // create cell r1 c2 // creates a <td> element mycurrent_cell = document.createElement("td"); mycurrent_cell.setAttribute("width", "24px"); // creates a text node mycurrent_txtbox = document.createElement("img"); mycurrent_txtbox.setAttribute('src',"images/x11_close.gif"); mycurrent_cell.appendChild(mycurrent_txtbox); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); // create cell r2 c1 mycurrent_row = document.createElement("tr"); // creates a <tr> element r1 // creates a <td> element mycurrent_cell = document.createElement("td"); mycurrent_cell.setAttribute("colspan", "2px"); mycurrent_cell.setAttribute("width", "380px"); mycurrent_cell.setAttribute("height", "276px"); // add text to r2. newText=document.createTextNode(objText); mycurrent_cell.appendChild(newText); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2"); mytable.setAttribute('cellpadding', '0') mytable.setAttribute('cellspacing', '0') mytable.setAttribute('cellpadding', '0') // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable);}</script></head><body><div id='styled_popup' name='styled_popup' style='width:380px; height:300px; position:absolute; top:150px; left:50px;'><input type="button" onClick="start('Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)');"/></div></body> Link to comment Share on other sites More sharing options...
justsomeguy Posted July 30, 2012 Share Posted July 30, 2012 Tables always expand to fit what's inside the cells. Link to comment Share on other sites More sharing options...
rogerio Posted July 30, 2012 Author Share Posted July 30, 2012 Tables always expand to fit what's inside the cells.I have a table with the same text that was created in HTML and it does not expand.<div id='styled_popup' name='styled_popup' style=' width: 380px; height: 300px; display:none; position: absolute; top:150px; left: 50px;'><table width='380' cellpadding='0' cellspacing='0' border='0'0' > <tr> <td><img height='23' width='358' src='images/x11_title.gif' class='dragme'></td> <td><a href='javascript:styledPopupClose();'><img height='23' width='24'src='images/x11_close.gif' border='0' class="close"></a></td> </tr> <tr><td colspan='2' style='top:24px;'> <div class="text" style="width:377px; height:277px; border-left: 2px solid gold; border-bottom: 2px solid gold; border-right: 2px solid gold;"> Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving:-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see memoving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to seeme moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title tosee me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window titleto see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my windowtitle to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag mywindow title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Dragmy window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving:-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see memoving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to seeme moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window title tosee me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my window titleto see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag my windowtitle to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Drag mywindow title to see me moving :-)Drag my window title to see me moving :-)Drag my window title to see me moving :-)Dragmy window title to see me moving :-) </div> </td> </tr></table></div><input type='submit' onMouseDown='setPos(event, document.getElementById("styled_popup"));' value=' Fire! '> Link to comment Share on other sites More sharing options...
justsomeguy Posted July 30, 2012 Share Posted July 30, 2012 It looks like it doesn't need to. The table can be 300px high, and the div is only 277. Link to comment Share on other sites More sharing options...
rogerio Posted July 30, 2012 Author Share Posted July 30, 2012 That's my attempt with the script - set row 1 for 24 and row 2 for 277 making up 299, but it isn't working. Here is one where I added the div into the script: <script> function start(objText) { var mybody = document.getElementsByTagName("body")[0]; // get the reference for the body // create the div mydiv = document.createElement("div"); mydiv.style.width="377px"; mydiv.style.height="277px"; // append the div to the body mybody.appendChild(mydiv); mytable = document.createElement("table"); // creates a <table> element and a <tbody> element mytablebody = document.createElement("tbody"); mytable.setAttribute('cellpadding', '0') mytable.setAttribute('cellspacing', '0') mytable.setAttribute('border', '0') mytable.setAttribute('width', '380')// creating all cells // create cell r1 c1 mycurrent_row = document.createElement("tr"); // creates a <tr> element r1 // creates a <td> element mycurrent_cell = document.createElement("td"); // creates a text node mycurrent_image = document.createElement("img"); mycurrent_image.setAttribute('src',"images/x11_title.gif"); mycurrent_image.setAttribute('height', '23px'); mycurrent_image.setAttribute('width', '358px'); mycurrent_cell.appendChild(mycurrent_image); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell);// create cell r1 c2 // creates a <td> element mycurrent_cell = document.createElement("td"); mycurrent_cell.setAttribute("width", "24px"); // creates a img node mycurrent_image = document.createElement("img"); mycurrent_image.setAttribute('src',"images/x11_close.gif"); mycurrent_image.setAttribute('height', '23px'); mycurrent_image.setAttribute('width', '24px'); mycurrent_cell.appendChild(mycurrent_image); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row);// create cell r2 c1 mycurrent_row = document.createElement("tr"); // creates a <tr> element r1 // creates a <td> element mycurrent_cell = document.createElement("td"); mycurrent_cell.setAttribute("colspan", "2"); mycurrent_cell.setAttribute("top", "24px"); // add text to r2. newText=document.createTextNode(objText); mycurrent_cell.appendChild(newText); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2px");} </script> Link to comment Share on other sites More sharing options...
justsomeguy Posted July 30, 2012 Share Posted July 30, 2012 I believe you only set the height of the tr, not the td. The td will expand to fill the tr, and it will expand to fit the content if necessary. The code is post 3 works because the div inside the td is small enough that it doesn't need to expand further. The above code doesn't do the same thing, so it's going to expand to fit the text. Link to comment Share on other sites More sharing options...
rogerio Posted July 30, 2012 Author Share Posted July 30, 2012 I believe you only set the height of the tr, not the td. The td will expand to fill the tr, and it will expand to fit the content if necessary. The code is post 3 works because the div inside the td is small enough that it doesn't need to expand further. The above code doesn't do the same thing, so it's going to expand to fit the text.That's my question - how do I put it all together? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 30, 2012 Share Posted July 30, 2012 You just need to create the div and append it to the td like you have in post 3. Put the text inside that div and set the style options on it to size it like you want, or give it a class and set the style in a CSS sheet. Link to comment Share on other sites More sharing options...
rogerio Posted July 30, 2012 Author Share Posted July 30, 2012 ok, that got me part way, but even though the cell is the correct size, the text overruns the cell out the bottom and holds the correct width. // create cell r2 c1 mycurrent_row = document.createElement("tr"); // creates a <tr> element r1 mycurrent_row.setAttribute("height", "277px"); // creates a <td> element mycurrent_cell = document.createElement("td"); mycurrent_cell.setAttribute("colspan", "2"); mycurrent_cell.setAttribute("top", "24px"); // appends the cell <td> into the row <tr> mycurrent_row.appendChild(mycurrent_cell); // append the <div> to the cell <td> mycurrent_cell.appendChild(mydiv); // add text to r2. newText=document.createTextNode(objText); mydiv.appendChild(newText); Link to comment Share on other sites More sharing options...
justsomeguy Posted July 30, 2012 Share Posted July 30, 2012 You can set the overflow CSS property on the div to control how it handles oversized content: http://www.w3schools.com/cssref/pr_pos_overflow.asp Using "auto" would have it show scrollbars only if the content is too large. Link to comment Share on other sites More sharing options...
rogerio Posted July 30, 2012 Author Share Posted July 30, 2012 justsomeguy you are a gentleman and a scholar. I did notice that <div> rejected .setAttribute for .style while <table> accepted .setAttribute; what's the reason behind this? Link to comment Share on other sites More sharing options...
justsomeguy Posted July 30, 2012 Share Posted July 30, 2012 I haven't seen that happen. It's typical to use the style property instead of setAttribute for that information though. Link to comment Share on other sites More sharing options...
rogerio Posted July 31, 2012 Author Share Posted July 31, 2012 this is one line in the above script that is using "setAttribute" that I want to change to "style" and it isn't working: mycurrent_image.style.backgroundImage= "url('images/x11_close.gif')"; Link to comment Share on other sites More sharing options...
justsomeguy Posted July 31, 2012 Share Posted July 31, 2012 The syntax looks fine. You can use your browser's debugger to verify that it's sending the request for that image and that the image was found on the server. Link to comment Share on other sites More sharing options...
rogerio Posted July 31, 2012 Author Share Posted July 31, 2012 The image is in the path using "setAttibute". No errors from IE or FF. IE shows a distored image and FF does the same if I remove DTD checking from the header; otherwise FF show nothing. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now