Показать сообщение отдельно
  #13 (permalink)  
Старый 14.12.2010, 12:23
Аватар для PeaceCoder
Профессор
Отправить личное сообщение для PeaceCoder Посмотреть профиль Найти все сообщения от PeaceCoder
 
Регистрация: 15.12.2009
Сообщений: 742

Попросили вылижить мое решение. Решение элегантное потому что таблица становится не такой как ее привыкли видеть

П.С. могут быть проблемы в ИЕ6. А так решение кроссбраузерное вроде.
Недостаток: Столбцы заголовка по центру без JS не выровнять.Зато плюс большой: как не крути размеры .block таблица выглядит нормально, если конечно размеры не меньше минимальной ширины заголовка. Тогда заголовок вылезает заширину таблицы

<style type='text/css'>
.block {
  width:80%;
  height: 100px;
  position: absolute;
  top: 20px;
  overflow: visible;
  }
.scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
.head.fixed {
  height: 20px;
  top: -20px;
  position: absolute;
  background: LemonChiffon;
  border-bottom: 1px solid black;
  width: 100%;
  }
.table {
  border-collapse: collapse;
  }
.table td { border: 1px solid gray; border-top: 0px;}
tr.head td {  height:0; } 
tr.head td .st {
  white-space: nowrap;
  position: absolute; 
  top: -20px;
  height: 20px;
  border-left: 1px solid gray;
  line-height: 20px;
  padding-left: 10px;
  margin-left: -1px;
  }
tr.head td .or { white-space: nowrap; height:0; overflow: hidden; padding-left: 10px;}
</style>

<div class='block'>
<div class="scroll">

<div class="head fixed"></div>

<table cellpadding="0" cellspacing="0" class="table">
  <tr class='head'>
    <td width="100"><div class='st'>Столб</div><div class='or'>Столб</div></td>  <!-- должны быть одинаковые значениея для авто подгонки столбцов по заголовкам -->
    <td><div class='st'>Столбец 2 длинный</div><div class='or'>Столбец 2 длинный</div></td>
    <td><div class='st'>Столбец 3 очень длинный </div><div class='or'>Столбец 3 очень длинный</div></td>
  </tr>
  <tr>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
    <td></td>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
  </tr>
  <tr>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
    <td></td>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
  </tr>
  <tr>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
    <td></td>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
  </tr>
  <tr>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
    <td></td>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
  </tr>
  <tr>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
    <td></td>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
  </tr>
  <tr>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
    <td></td>
    <td>Жили были дед да бабка был у них колобок. А также дед еще рыбку золотую любил ловить</td>
  </tr>
</table>

</div>
</div>
__________________
Настоящий программист думает и осознает сам решение задачи, а не копирует другие мысли, не осознавая их (c)
Относись к человеку так же, как хотелось бы отношения к себе (с)
Все нужно там, где оно нужно, а все не нужно нигде (с) Gozar
B~Vladi: А кто такой JavaScript стрелок?! micscr: это тот, кто не jQuery танкист.
Программы становятся медленнее быстрее, чем компьютеры становятся быстрее (с) Никлаус Вирт

Последний раз редактировалось PeaceCoder, 14.12.2010 в 12:42.
Ответить с цитированием