Выравнивание ячеек таблицы

Great Rash · March 4, 2009

Есть таблица шириной 100%, которая состоит из 4-х столбцов.

первый столбаец - ширина 20%

второй столбец - ширина 30%

третий столбец - ширина 20%

четвертый столбец - ширина 30%

В первом и третьем столбцах находится текст, во втором и четвертом столбцах находятся инпуты (<input type="text">). У инпутов ширина 100%.

Проблема:

В браузере Интернет Испортил, если в инпуте много текста колонка расширяется больше положенных 30%.

Вопрос:

Как бы так сделать, чтобы в ИЕ ничего не ломалось? Пробовал ставить у <input> overflow: hidden; - толку никакого.

Razor · March 4, 2009

А какая версия?

Причерчик забабахал, работает нормально вроде ИЕ7 и 6

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
	<title>тест</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style type="text/css">
.table1{
width: 100%;

}

td {
width: 30%;
}

td.text {width: 20%;}

input {width: 100%;}
</style>
</head>

<body>
<form action="">
<table class="table1">
<tr>
<td class="text">текст</td><td><input type="text" /></td><td class="text">текст</td><td><input type="text" /></td>
</tr>
</table>
</form>
</body>
</html>

Ну или/и код заодно кинь?

Edited March 4, 2009 by Razor

Vlad · March 4, 2009

Добавь к инпуту maxlength, чтобы не вводили больше положенного. Или ограничь ширину текстового поля специально для IE.

Great Rash · March 4, 2009

Добавь к инпуту maxlength, чтобы не вводили больше положенного.

Дело в том, что данные в value приходят с сервера.

Или ограничь ширину текстового поля специально для IE.

Надо 100% обязательно. Дело в том что div резайзится яваскриптом (есть такой яваскрипт dragresize.js - типа эмуляция окон).

Вот такая ситуевина у меня:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Valid XHTML 1.0 Strict template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		@import url('style.css');

		.table1{
			width: 100%;
			border: #f00 1px solid;
			border-collapse: collapse;
		}

		td {
			width: 30%;
			padding: 3px;
		}

		td.text {
			width: 20%;
		}

		td.input-td {
			padding-right: 7px;
		}

		input {
			width: 100%;
		}
	</style>
</head>

<body>

<div style="width: 550px;">
	<table class="table1">
		<tr>
			<td class="text">текст</td>
			<td class="input-td" style="border-right: #f00 1px solid;"><input type="text" value="" /></td>
			<td class="text">текст</td>
			<td class="input-td"><input type="text" value="Черезтридцатьтризабораногозадерищенко" /></td>
		<tr>
	</table>
</div>

</body>
</html>

Edited March 4, 2009 by Great Rash

Razor · March 4, 2009

Да, проблемка, ... если ЯС задействован, то впринципе можно сначала загрузить страницу, а потом заполнить через ЯС форму.

Вот простейший пример на скорую руку

в body добавить если

<body onload="document.getElementById('inp2').value='Черезтридцатьтризабораногозадерищенко'">

то вроде все ок?

Great Rash · March 4, 2009

В общем все так и происходит, только через AJAX. Правда рисуется все только после того как readystate равняется 4, т.е. ответ получен. Но уже это я менять не могу... т.к. таким макаром отрисовывается не только форма, но и все остальное содержимое окна.

UPD:

Не придумал ничего лучше, чем написать вот такую портянку:

(ALERT!!! Портянка!!!)

<input type="text" style="width: expression((this.parentNode.parentNode.parentNode.parentNode.offsetWidth/2)-(this.parentNode.parentNode.parentNode.parentNode.offsetWidth*20/100));" value="Черезтридцатьтризабораногозадерищенко" />

Edited March 4, 2009 by Great Rash

Sign In

Выравнивание ячеек таблицы

Question

Great Rash

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Razor

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Razor

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information