Вот таблица 3x3:
<html>
<body style="overflow:hidden;">
<style>
div.table_div {overflow:scroll;width:378px;height:117px;position:relative;}
table.TheTable {width:361px;height:100px;table-layout:fixed;border-collapse:collapse;border:1px solid #000000;}
td.TheTableColumnCell {font-size:16px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border:1px solid #000000;}
</style>
<div class="table_div" id="table_div">
<table class="TheTable">
<tr id='firstTr'>
<td class="TheTableColumnCell">
<div onclick="alert('1');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</div>
<div onclick="alert('2');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:90px;top:4px;width:30px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 2</div>
<div onclick="alert('3');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:150px;top:4px;width:210px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 3</div>
</td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell">I'm</td>
<td class="TheTableColumnCell">Vertically</td>
<td class="TheTableColumnCell">Aligned Middle!</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
</table>
</div>
</body>
</html>
Если вы вырезаете и вставляете этот код в HTML-файл и открываете его в своем браузере, вы увидите, что div действует как наложение на мойсетка.Это похоже на элемент управления «Планирование» (сетка представляет каждый часовой блок).
Меня сводит с ума то, что я не могу заставить текст внутри тегов div выравниваться по вертикали всредний.Реальные тд теги, без проблем.Но теги div внутри тега td - нет!
Я прочитал и попробовал все здесь: http://phrogz.net/css/vertical-align/index.html
Я попробовал (как стиль для div): padding,поля, высота линий и т. д.
РЕДАКТИРОВАТЬ: Я думаю, что есть некоторые путаницы в намерениях этой сетки.Причина, по которой я использую теги div, заключается в наложении «желтой полосы» на сетку.Это означает, что внутри одной ячейки td может быть несколько «желтых столбцов» или она может охватывать несколько ячеек.Например, мой исходный HTML-файл (при условии, что первый столбец - 12:00) содержит три события в первой строке.Событие 1: 12:00 - 12:30.Событие 2: 12:45 - 1:00 (оба в одной камере).Событие 3: 1:15 - 3:00 (и оно перекрывает две ячейки).Вроде того.Вот почему теги div.
