Когда ширина текстового поля установлена на 70%, браузер сообщает, что элемент должен составлять 70% от ширины его контейнера - в данном случае это TD. Вместо этого вы должны установить ширину TD на 70%, а затем ширину текстового поля на 100%. Как это:
<td style="width: 70%;">
<asp:TextBox ID="UserName" Width="100%" runat="server"></asp:TextBox>
</td>
Сделайте то же самое для этикеток.
Чтобы ответить на комментарии:
Рассмотрим порядок событий, которые браузер использует для определения размера TD. Если у вас есть следующее:
<html>
<body>
<table border="1">
<tr>
<td><span style="width: 30%;">ASDF</span></td>
<td><span style="width: 70%;">ASDF</span></td>
</tr>
<table>
</body>
</html>
Этот код сообщает браузеру, что диапазон должен быть на 70% меньше, чем TD. Единственный элемент, сообщающий TD, какой ширины он должен быть, это промежуток, который хочет быть на 70% меньше, чем TD. Таким образом, TD просто использует текст внутри диапазона, чтобы сказать, насколько большим он должен быть.
Переключение на это:
<html>
<body>
<table border="1">
<tr>
<td style="width: 30%;"><span>ASDF</span></td>
<td style="width: 70%;"><span>ASDF</span></td>
</tr>
<table>
</body>
</html>
Теперь TD справа должен составлять 70% ширины строки (TR), которая равна ширине TABLE. В этом случае TD слева определяет конечный размер таблицы, так как ее содержимое должно составлять 30% ширины таблицы.
Редактировать 2
Браузер попытается интерпретировать HTML и отобразить то, что, по его мнению, пытается сделать HTML, потому что так часто HTML плохо сформирован. Код, подобный этому, не имеет смысла <td><span style="width: 70%;">ASDF</span></td>, поскольку span говорит, что он хочет быть на 70% меньше, чем TD, но TD не имеет указанного размера. Поскольку он не имеет указанного размера, он получает свой размер из своего содержимого. В конце значение ширины диапазона игнорируется. Вы можете видеть, что все эти вещи приводят к одному и тому же выводу:
<td><span style="width: 1%;">ASDF</span></td>
<td><span style="width: 70%;">ASDF</span></td>
<td><span style="width: 200%;">ASDF</span></td>
Вот упрощенная версия того, что делает для этого браузер:
<td><span style="width: 70%;">ASDF</span></td>
- Нашел ТД
- TD не имеет ширины, его TR и TABLE также не имеют ширины, поэтому необходимо определить ширину на основе содержимого.
- Содержимое SPAN
- SPAN имеет ширину 70%, поэтому SPAN должен составлять 70% от ширины TD (запомните это позже)
- SPAN содержит простой текст, рисует текст и измеряет ширину, допустим, он достигает 55 пикселей.
- Сообщите SPAN, что его ширина должна составлять не менее 55 пикселей (поскольку свойство переполнения не установлено).
- Какое значение больше? 55 пикселей или 70% ширины ТД? 55 пикселей> не определено
- Установить ширину SPAN на 55 пикселей
- Установить ширину TD до 55 пикселей
В этот момент браузер будет возвращаться к HTML, так как родительская ширина была установлена, это будет второй проход для определения размера элементов.
- TD имеет ширину 55 пикселей
- SPAN имеет ширину 70%, поэтому SPAN должен составлять 70% от ширины TD
- Какое значение больше? 55 пикселей или 70% ширины ТД? 55 пикселей> 39 пикселей
- Сохранить ширину SPAN на уровне 55 пикселей
- Проверить ширину текста, без изменений
- Проверить ширину SPAN, без изменений
- Проверьте ширину ТД, без изменений
Таким образом, в этот момент браузер прошел HTML-код, а затем вернулся к TD, внес изменения, а затем вернулся и снова.
Такой же процесс происходит при вычислении ширины нескольких ячеек подряд. В этом примере:
<tr>
<td><span style="width: 30%;">ASDF</span></td>
<td><span style="width: 70%;">ASDF</span></td>
</tr>
Каждый TD вычисляет свою ширину отдельно и в результате получает 55px каждый, потому что ничто не говорит TD о том, что они должны иметь размеры относительно друг друга.
Переключитесь на следующий код, и внезапно каждый TD будет иметь ширину 55 пикселей, но затем стиль сообщает браузеру, что они должны быть относительно друг друга. Таким образом, правый столбец получает несколько дополнительных пикселей и заканчивается на 55px / 30% * 70% = 128 пикселей
<tr>
<td style="width: 30%;"><span>ASDF</span></td>
<td style="width: 70%;"><span>ASDF</span></td>
</tr>
Почему браузер использует левый столбец для определения размера правого столбца? Простые браузеры рассчитали бы это в обоих направлениях и выяснили, какой путь все еще придерживается минимальной ширины, которую указывает TD. В результате этого вычисления ширина левого столбца будет меньше минимальной ширины, необходимой для его содержимого: 55px / 70% * 30% = 24 пикселя
Чтобы ответить на ваше второе редактирование, a / b - браузер обычно должен рассчитать его в обоих направлениях, а затем определяет, какой путь более целесообразен с учетом ограничений. Скорее всего, он имеет сложные алгоритмы, чтобы определить, действительно ли он должен видеть, имеете ли вы в виду 30% - это ограничение слева или 70% - это определяющее ограничение справа. Кроме того, если вы умножите что-либо на 100%, это не изменится, поскольку это то же самое, что умножить что-то на 1. Таким образом, 55px * 100% / 30% (или 55 * 1 / 0.3) равно 55px / 30% (или 55 / 0,3).
Вы должны рассмотреть подходы к этим типам по-другому. После построения HTML-кода вам необходимо четко указать, что должен делать браузер с размером и интервалом, если по умолчанию это не то, что вам нужно. Если вы просто установите что-то на 30%, вы, скорее всего, не предоставите браузеру достаточно информации, чтобы сделать последовательный выбор. Даже при том, что есть спецификация HTML, которая говорит, что должно произойти, это не всегда ясно. И разные браузеры реализуют его по-разному, так как браузер может пройти 100 шагов, чтобы выложить страницу.
Например, в исходном примере метка и текстовое поле должны иметь ширину в пикселях, чтобы они подходили для вашего графического дизайна, если размеры по умолчанию недостаточны. Делать что-либо еще - это решать браузеру, потому что html-элементам не хватает контекста для согласованности.
Чтобы поиграть с тем, что браузеры делают в разных сценариях, просто попробуйте создать небольшую html-страницу, которая удаляет все, что вы не тестируете. Затем настраивайте одну вещь за другой, пока она не станет понятной. Это единственный способ изучить что-то такое сложное, как макет таблицы в браузере. Если происходит что-то противоположное тому, что, по вашему мнению, должно произойти, опубликуйте пример в новом вопросе на этом сайте, и кто-то укажет вам спецификацию HTML, объясняющую, что должно произойти. Я рекомендую этот сайт:
http://www.w3schools.com/html/html_tables.asp
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables