Таблица : фиксированные колонки

[klierik]

здравствуйте.

подскажите плиз как реализовать следующее:

есть таблица шириной 100%.

таблица имееть заголовки.

заголовок может покрыват несколько колонок (ну ето не так важно).

проблема заключаеться в том, что некоторые заголовки (ну собственно и совокупность колонок под ними) должны иметь свою фиксированную ширину,

но выставляя ширину таблицы в 100% все летит к чертям и оно растягиваеться как хочет =(

код:

сss

#grid {
 border:0px; /* border="0" */
 border-collapse:collapse; /* cellspacing="0" */
 /*width: 100%;*/
}
#grid td {
 padding:0px; /* cellspadding="0" */
 text-align: center;
 vertical-align: middle;
}
/*** subject line ***/
#grid th.index {
 width: 20px;
}
#grid th.yoursite {
 width: inherit;
}
#grid th.relations {
 width: 150px;
}
#grid th.hissite {
 width: inherit;
}
#grid th.pr {
 width: 350px;
}
#grid th.actions {
 width: 300px !important;
}

html:

<!-- grid -->
 <table id="grid" border="1" bordercolor="red" width="100%">
 <thead>
 <!-- table title -->
 <tr>
 <th class="index">[ ]</th>
 <th class="yoursite">Your Site^</th>
 <th class="relations">Relations</th>
 <th class="hissite">His Site</th>
 <th class="pr">PR</th>
 <th class="actions" colspan="4">Actions</th>
 </tr>

 <!-- table content -->
 </thead>
 <tr>
 <td>[ ]</td>
 <td>http://google...</td>
 <td>=>?</td>
 <td>Yahoo?</td>
 <td>0</td>
 <td>Accept</td>
 <td>Decline</td>
 <td>Delete</td>
 <td>Send M?</td>
 </tr>
 </table>
 <!-- /grid -->

DOCTYPE : XHTML 1.0 Transitional

подскажите плз можно ли решить, и как, данную задачу средствами html?

[Fed]

даже не читая кода могу сказать,что поставить можно на части колонок фикс.ширину,но тогда 1 колонка будет занимать ост.длину.

или ставьте проценты

[klierik]

спасибо. но я не совсем понял что именно вы имеете ввиду.

объясните пожалуста на примере.

tnx

[Gatanoa]

Вместо пикселей, как у вас в CSS, размеры ширин ячеек должны быть указаны в процентах. Для подсч?тов нужен простой калькулятор.

[klierik]

2Gatanoa

так нет... Вы наверно ен поняли...

есть пару колонок которые должны иметь именно пиксельную фиксированную ширину, а остальные колонки пусть себе заполняют оставшееся пустое пространство.

слетает последняя колонка, так как установив туда ширину, он все равно растягиваеться как хочет (((

[klierik]

в общем решил даную проблему следующим способом:

во все колонки которые должны быть фиксированной ширины помещаеться

на

вешаеться ширина и overflow.

всем колонкам ширина котрых неважна присваеваеться %е значение равное%

100/общее_колво_колонок_неважной_ширины (ну что б всем не ставить 50%)

вот пример:

css:

**************** grid ****************/
#grid {
	border:0px; /* border="0" */
	border-collapse:collapse; /* cellspacing="0" */
	/*width: 100%;*/
}
#grid td {
	padding:0px; /* cellspadding="0" */
	text-align: center;
	vertical-align: middle;
}
/*** subject line ***/
#grid th, #grid th div {
	padding: 0px;
	margin: 0px;
}
#grid tr td {
	text-align: left;
	vertical-align: middle;
}
#grid div {
	overflow: hidden;
}
#grid .index div {
	width: 20px;
}
#grid .yoursite {
	width: 50%;
}
#grid .relations div {
	width: 150px;
}
#grid .hissite {
	width: 50%;
}
#grid .pr div {
	width: 50px;
}
#grid .actions div {
	width: 300px;
}

xhtml 1.0:

	<table id="grid" border="1" bordercolor="red">
		<thead>
			<!-- table title -->
			<tr>
				<th class="index"><div>[ ]</div></th>
				<th class="yoursite">Your Site^</th>
				<th class="relations"><div>Relations</div></th>
				<th class="hissite">His Site</th>
				<th class="pr"><div>PR</div></th>
				<th class="actions" colspan="4"><div>Actions</div></th>
			</tr>

			<!-- table content -->
		</thead>
		<tr>
		   	<td class="index"><div>[ ]</div></td>
			<td class="yoursite"><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div></td>
			<td class="relations"><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div></td>
			<td class="hissite"><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div></td>
			<td class="pr"><div>LoremIpsumissimplydummytextoftheprintingandtypesetting	industry.</div></td>
			<td><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div></td>
			<td><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div></td>
			<td><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div></td>
			<td><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div></td>
		</tr>
</table>
<!-- /grid -->

решение может не идеальное, зато дает требуемый результат.

[YETI]

Зачем дивы не понятно. По-моему можно было просто тянущимся колонкам поставить по 100% ширины и все.

[klierik]

еще вопрос частично по теме

есть колонка произвольной ширины

в ней содержиться информация со стилем white-space:nowrap;

как зделать так что б информация нерастягивала колонку, а просто прятолось как бы overflow:hidden;

никак не могу обыгратся с ними ((

upd: в ФФ и Опере показывает нормально как и должно быть. проблемма с ие6/7

upd2: сделал. на таблицу повесил table-layout: fixed; и в коде на th повесил так же ширину.

{... перенесено в Таблицы lancer}