Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Строки одной высоты в таблице

Автор: Avtor 23.7.2007, 20:25

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

Может что-нибудь в этом направлении подскажете: полный текст по нажатию на кнопку в ячейке таблицы.

Автор: solenko 23.7.2007, 21:33

Так вы хотите чтобы все строки были как максимальная или просто заданной заранее высоты?
Если заданной заранее, то можно попробовать посмотреть свойства overflow и table-layout

Автор: Avtor 24.7.2007, 05:54

Чтобы все строки были минимальной высоты, а весь непоместившийся текст надо куда-то приспособить.

Автор: Alik_Kirillovich 24.7.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>

Автор: solenko 24.7.2007, 09:29

А у TD overflow нету?

Автор: Alik_Kirillovich 24.7.2007, 15:13

Цитата(solenko @ 24.7.2007, 10:29

)

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

Автор: Avtor 24.7.2007, 19:53

Спасибо большое - как раз то-что нужно.

Автор: Avtor 26.7.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 же полоса прокрутки не появляется. Как быть?