Строки одной высоты в таблице

 
0
 
JavaScript
ava
Avtor | 23.07.2007, 21:25
Подскажите в каком направлении копать: из БД в таблицу выводятся данные. Хочу чтобы все строки были одной высоты (для эстетики), но в первой строке может быть одно слово, а во второй сто - и так все строки в таблице получаются разной высоты. Можно конечно загонять информацию в textarea (будут одной высоты, тока если информации много будет появляться скрол), но как-то уж думаю коряво получится...

Может что-нибудь в этом направлении подскажете: полный текст по нажатию на кнопку в ячейке таблицы.
Comments (7)
ava
solenko | 23.07.2007, 21:33 #
Так вы хотите чтобы все строки были как максимальная или просто заданной заранее высоты?
Если заданной заранее, то можно попробовать посмотреть свойства overflow и table-layout
ava
Avtor | 24.07.2007, 05:54 #
Чтобы все строки были минимальной высоты, а весь непоместившийся текст надо куда-то приспособить.
ava
Alik_Kirillovich | 24.07.2007, 07:34 #
Помещаем содержимое каждой строки в Div. В этом Div'е с помощью CSS-свойтсва height устанавливаем высоту строки. Для того, чтобы все лишнее оказалось за прокруткой, используем CSS-свойтсво overflow:auto

Примерно вот так:

<html>
<head>
<title>
Таблица со строками одинаковой высоты2
</title>
<style>
div.divTD
{
height: 100px; /*Высота каждой строки*/
overflow: auto; /*Все лишнее - за полосу прокрутки*/
}
</style>
</head>
<body>

<table border = "1">
<tr>
<td>
<div class = "divTD">
1111111111111111111111111<br>
1111111111111111111111111<br>
1111111111111111111111111
</div>
</td>
</tr>
<tr>
<td>
<div class = "divTD">
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
</div>
</td>
</tr>
<tr>
<td>
<div class = "divTD">
333333333333333333333333<br>
333333333333333333333333<br>
</div>
</td>
</tr>
</table>


</body>
</html>
ava
solenko | 24.07.2007, 09:29 #
А у TD overflow нету?
ava
Alik_Kirillovich | 24.07.2007, 15:13 #
Цитата (solenko @ 24.7.2007, 10:29 findReferencedText)
А у TD overflow нету?


Похоже, что нет. Я пробовал применить overflow непосредственно к TD, но такой код НЕ РАБОТАЕТ:

<html>
<head>
<title>
Таблица со строками одинаковой высоты - НЕ РАБОТАЕТ
</title>
<style>
table#tblFixedTable
{
table-layout: fixed;
}

table#tblFixedTable tr
{
height: 100px; /*Высота строки*/
}

table#tblFixedTable td
{
height: 100px; /*Высота ячейки равна высоте строки*/
overflow: auto; /*Все лишнее - за полосу прокрутки*/
}
</style>
</head>
<body>

<table id = "tblFixedTable" border = "1">
<tr>

<td>
1111111111111111111111111<br>
1111111111111111111111111<br>
1111111111111111111111111
</td>
</tr>
<tr>
<td>

222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>

222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>
222222222222222222222222222222<br>

222222222222222222222222222222<br>
</td>
</tr>
<tr>
<td>
333333333333333333333333<br>
333333333333333333333333<br>

</td>
</tr>
</table>


</body>
</html>
ava
Avtor | 24.07.2007, 19:53 #
Спасибо большое - как раз то-что нужно.
ava
Avtor | 26.07.2007, 19:53 #
Потестировал примерчик. Если. допустим. во второй строке убрать все <br> и высоту сделать в 30 px. То этот код

<html>
<head>
<title>
Таблица со строками одинаковой высоты2
</title>
<style>
div.divTD
{
height: 30px; /*Высота каждой строки*/
overflow: auto; /*Все лишнее - за полосу прокрутки*/
}
</style>
</head>
<body>

<table border = "1">
<tr>
<td>
<div class = "divTD">
1111111111111111111111111<br>
1111111111111111111111111<br>
1111111111111111111111111
</div>
</td>
</tr>
<tr>
<td>
<div class = "divTD">
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
222222222222222222222222222222
</div>
</td>
</tr>
<tr>
<td>
<div class = "divTD">
333333333333333333333333<br>
333333333333333333333333<br>
</div>
</td>
</tr>
</table>


</body>
</html>

Будет корректно работать только под IE и Opera. В Mozilla же полоса прокрутки не появляется. Как быть?
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
advanced
Submit