Question

I’ve been going at this for about an hour now and I can’t quite figure it out.

I have an PHP page that has a form in it that uses AJAX to send the form data to another PHP file to process and send back results. I have a wrapper div in my page that goes from right underneath the top body tag to right above my footer. After the form is submitted and the results are returned via AJAX, I replace the contents of this wrapper div with the results. The results are all contained within one big table.

However, for some reason, after I submit the form and the results come back, all of the <tr>s in the whole table are all 4 pixels longer vertically. The <td>s have their lengths specified in the code, so they are all the correct length still, but the <tr> extends 4 pixels longer underneath. When I look at the results directly from the backend PHP page, everything looks fine and the <tr>s are all the correct length.

Because everything is fine with the results before they’re sent back to the first page, I’m not sure what the problem is.

I can’t figure out what is causing this to happen, any advice on what is causing it and/or how to fix it would be helpful!

Answer 1

here are some possible solutions:

1: maybe AJAX response is sending line breaks, or white spaces along with data, try to trim the AJAX response.

2: If this didn’t work, in CSS set {overflow-x: hidden;} for td. use this option because you said you already specified the width for td.

for example:
table.myajaxtable td{overflow-x: hidden; width:150px;}