IE: расположить две строки текста в верхнем и нижнем углах в ячейке таблицы? - PullRequest
Новая
       6

IE: расположить две строки текста в верхнем и нижнем углах в ячейке таблицы?

0 голосов
/ 07 мая 2010

У меня есть таблица с динамическими данными. И есть определенная строка текста, которая должна отображаться только тогда, когда пользователь наводит курсор на строку таблицы. Эта строка текста должна быть «прикреплена» к нижнему краю ячейки таблицы.

Пока работает с Firefox, но не работает в IE.

Живой код можно посмотреть здесь: http://2010resolutions.org/test/index.html

Текст красного цвета должен быть прикреплен к нижней границе ячейки таблицы. (Они будут иметь фиксированную высоту и ширину)

Любые подсказки, как заставить это работать в IE?

Любая помощь приветствуется.

Вот код: 

<style>
table { 
 width: 500px;
 background: gray;
}
td { vertical-align: top; }
.wrapper { 
 position: relative; 
 background: green;
}
tr, td, .wrapper {
 height: 100%;
 padding-bottom: 0.75em;
}
.bottom {
 position: absolute;
 left: 0;
 bottom: 0;
 background: red;
}
.bottom { visibility: hidden; }
tr:hover .bottom { visibility: visible; }
</style>
<table>
  <tr class="data">
    <td>
     <div class="wrapper">
            This is line 1<br />
            This is line 2<br />
            This is line 3<br />
            <span class="bottom">Bottom line 1</span>
        </div>
    </td>
    <td>
  <div class="wrapper">
            This is line 4<br />
         This is line 5<br />
         This is line 6<br />
         <span class="bottom">Bottom line 2</span></span>
        </div>
    </td>
    <td>
     <div class="wrapper">
            This is line 7<br />
            This is line 8<br />
            This is line 9<br />
            This is line 10<br />
            This is line 11<br />
            This is line 12<br />
            <span class="bottom">Bottom line 3</span>
        </div>
    </td>
  </tr>
  <tr>
 <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

1 Ответ

0 голосов
/ 07 мая 2010

IE не поддерживает tr: hover, вы можете использовать Javascript, чтобы это исправить.

см .: http://www.xs4all.nl/~peterned/csshover.html

...