Table's columns width changes after adding another page to tr using ajax

Question

I have a problem which is hard to explain I hope you will understand and help me, I have a table which produce rows dynamically, when a row is pressed it shows a page containing some information, the problem is that when I press on the row and the info page is shown the columns width is changed and the entire table shifts (all the widths). I have noticed that it happens after the info page is loaded but can't figure out why...

CODE: this is where I post the table:

echo "<table border=\"0\" width=\"100%\" cellspacing=\"0\" align=\"center\" class=\"result_table\" id=\"result_table\">

<tr align=\"right\" bgcolor=\"red\">
<th bgcolor=\"#cccccc\" align=\"right\" >עיר</th>
<th bgcolor=\"#cccccc\" >רחוב</th>
<th bgcolor=\"#cccccc\" >מספר בית</th>
<th bgcolor=\"#cccccc\" >מחיר</th>
</tr>"; 
foreach($types as $data){               
echo $data['id'];
echo "<tr onClick=\"waiting_for_post(".$data['id'].");\" 
class=\"search_row\">";
echo "<td align=\"right\" width=\"25%\">";
echo $data['city'];
    echo "</td>";
echo "<td align=\"right\">";
echo $data['street'];
echo "</td>";
echo "<td align=\"right\">";
echo $data['house'];
    echo "</td>";
echo "<td align=\"right\">";
echo $data['price'];
echo "</td></tr>";
echo "<tr class=\"info_row\" style=\"width:100%\"><td colspan=\"4\"><div id=\"div_num_".$data['id']."\" style=\"height:0px\" ></div></td></tr>";

function waiting_for_post(apart_id){
var div = document.getElementById("div_num_"+apart_id)
var xmlhttp = createXmlHttpRequestObject();

xmlhttp.onreadystatechange=function()
{
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {

     var responseText = xmlhttp.responseText;

     div.innerHTML = responseText;
        div.style.visibility = 'visible';
        div.style.height= "225px";
        div.style.width="100%";
   }
}
xmlhttp.open("GET","publish_data.php?id="+apart_id,true);
xmlhttp.send(); 

}

sayume · Accepted Answer · 2013-04-18 08:44:57Z

1

The width of column will change with the content, because you set "width:100%", use fixed width may solve the problem, and try to estimate the max width.

answered Apr 18, 2013 at 8:44

sayume

1281 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

antonpuz Over a year ago

thank you, setting the width to fixed width solved the problem for me.

Collectives™ on Stack Overflow

Table's columns width changes after adding another page to tr using ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related