Alignment problem with editable and non editable labels of pop up

I have a pop up which opens as all label type or editable type based on the condition. When I open the pop up as editable, the table is set to center and values are pr开发者_StackOverflowoperly aligned. When I open the same in non editable mode, the values are more moved to the left.

I have uploaded both to JSFiddle for analysis. Please help

Pop up with editable condition

http://jsfiddle.net/gr2022s/C9BZJ/

Pop up with non editable condition

http://jsfiddle.net/gr2022s/C9BZJ/1/

I had done a workaround by adding <blockquote> tag to one of the label but the problem seems to be the label is moved towards right from the others.

---

The reason is quite simple :

You never define any width for any <td>. So your <table> will scale each column according to the largest td content. And since your <input type="text /> is way larger than the simple text Ad Hoc, the editable table seems more centered...

Try this to test it :

<table border="1" width="300px">
    <tr>
        <td>content</td>
        <td>content</td>
    </tr>
</table>
<table border="1" width="300px">
    <tr>
        <td>a</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>
</table>
<table border="1" width="300px">
    <tr>
        <td>aaaaaaa</td>
        <td>aaa</td>
    </tr>
</table>

Or see your updated jsFiddle.