Ниже приведена таблица 3 x 3:
<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 {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"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
</table>
</div>
</body>
</html>
Примечание:
a) Ширина таблицы составляет 361 пикселей, потому что: 119 пикселей для каждой ячейки (119 x 3 = 357). Затем добавьте 4 пикселя к четырем границам.
b) Высота таблицы составляет 100 пикселей, потому что: 32 пикселя для каждой ячейки (32 x 3 = 96). Затем добавьте 4 пикселя к четырем границам.
в) Тег div. Для моих настроек windows ширина / высота полосы прокрутки составляет 17 пикселей. Вот почему вы видите div ширину и высоту 378px (361 + 17) и 117px (100 + 17). Цель для div в том случае, если мне действительно нужно прокрутить (в моем примере 3x3 мне не нужно).
В итоге: это таблица 3x3 с фиксированной шириной / высотой. Если вы вырезаете и вставляете этот код в HTML-файл и открываете его в своем браузере, вы увидите полосы прокрутки, но ни одна из них не позволит вам прокручивать (потому что у меня установлены ширины / высоты, чтобы показывать все без прокрутки) .
Проблема:
Выполните следующие действия:
Вместо того чтобы делать высоту каждой ячейки 32px, сделайте их 16px. Таким образом, высота таблицы . Таблица должна быть изменена на 52px (вместо 100px). Высота для div.table_div должна быть изменена на 69px (вместо 117px) - опять моя высота полосы прокрутки 17px.
Вертикальная полоса прокрутки, хотя она всегда видна, теперь прокручивается. Я не могу соответствовать всем сейчас? Но я думал, что мои расчеты верны? Магическое число кажется 22px. Менее 22px (высота) я получаю полосу прокрутки, которая прокручивается. Больше 22px я получаю полосу прокрутки, которая не прокручивается. Если тег div правильно рассчитан, полосы прокрутки не должны прокручиваться. Как мне избежать этого для высоты менее 22px?
EDIT: переполнение: необходима прокрутка. Я вытащил этот HTML из большего набора кода. В реальном коде таблица намного больше. Тег div позволяет мне показывать определенное количество ячеек, и я могу прокручивать, чтобы увидеть остальные. Это когда я начал играть с ростом менее 22 пикселей, именно тогда я обнаружил проблему. Поскольку это портит некоторые другие вещи, которые я пытаюсь сделать.