Проблема выравнивания с редактируемыми и нередактируемыми ярлыками всплывающих окон

Question

У меня есть всплывающее окно, которое открывается как все типы меток или редактируемые типы в зависимости от условия. Когда я открываю всплывающее окно как редактируемое, таблица устанавливается по центру, а значения правильно выровнены. Когда я открываю то же самое в не редактируемом режиме, значения больше перемещаются влево.

Я загрузил оба к JSFiddle для анализа. Пожалуйста, помогите

Всплывающее окно с редактируемым условием

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

Всплывающее с не редактируемое условие

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

Я сделал обходной путь, добавив тег <blockquote> к одному из ярлыков, но проблема, похоже, заключается в ярлык смещен вправо от остальных.

Answer 1

Причина довольно проста:

Вы никогда не определяете ширину для <td>. Таким образом, ваш <table> будет масштабироваться в каждом столбце в соответствии с самым большим содержанием td . И поскольку ваш <input type="text /> намного больше, чем простой текст Ad Hoc, редактируемая таблица кажется более центрированной ...

Попробуйте это проверить:

<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>

Или посмотрите ваш обновленный jsFiddle .