Kompx.com or Compmiscellanea.com

Адаптивная HTML таблица

Windows : Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.5+, Google Chrome / Chromium, Opera 9.5+, SeaMonkey 1.0+ [ 2 ].

Если HTML таблица содержит слишком много данных, она становится шире, чем доступное пространство на странице и начинает за него выходить. Чтобы исправить ситуацию, можно добавить таблице горизонтальную прокрутку. Пример:

12345678910
Table_data_1 Table_data_2 Table_data_3 Table_data_4 Table_data_5 Table_data_6 Table_data_7 Table_data_8 Table_data_9 Table_data_10

HTML / XHTML. Код:

<table>

<tr>

<th>1</th>

<th>2</th>

<th>3</th>

<th>4</th>

<th>5</th>

<th>6</th>

<th>7</th>

<th>8</th>

<th>9</th>

<th>10</th>

</tr>

<tr>

<td>Table_data_1</td>

<td>Table_data_2</td>

<td>Table_data_3</td>

<td>Table_data_4</td>

<td>Table_data_5</td>

<td>Table_data_6</td>

<td>Table_data_7</td>

<td>Table_data_8</td>

<td>Table_data_9</td>

<td>Table_data_10</td>

</tr>

</table>

CSS. Код:

table {display: block; overflow-x: auto;}

/* Дополнительные CSS, просто для приведения примера к некоему внешнему виду: */

table {border-collapse: collapse;}

table td,th {padding: 10px; border: 1px #000 solid;}

Примечание: CSS свойство display: block делает так, что таблица занимает по ширине только столько пространства, сколько ей нужно, чтобы вместить данные без визуальных искажений. Не больше, не растягиваясь по всей ширине доступного пространства на странице. Даже если в CSS код добавлен width: 100%. Пример:

123
Table_data_1 Table_data_2 Table_data_3

[ 1 ]

А так же в Netscape 9.0.

[ 2 ]

А так же в Netscape 9.0.


Aliosque subditos et thema

 

Распаковать несколько архивов

 

Распаковать с помощью unzip в командной строке Linux несколько zip-архивов в один каталог. Вопреки возможным ожиданиям, "unzip *.zip" работать не будет, *.zip необходимо взять в кавычки: unzip "*.zip" В архивах могут быть файлы с одинаковыми именами. Чтобы избежать перезаписи: unzip -B "*.zip" "Unzip -B" в процессе распаковки перезаписывает файлы с одинаковыми именами, но сохраняет их резервные копии. Новые имена для этих файлов создаются добавлением тильды ("~") в конец изначальных названий файлов. Если имеется расширение, то "~" добавляется после него. Если этого недостаточно, после тильды ("~") прибавляется уникальная последовательность цифр (до 5 знаков). "Unzip -B" не слишком рабочее решение. Например, поскольку диапазон последовательностей цифр может израсходоваться (99999 знаков, или 65535 для 16-битных систем), резервный файл с максимальным числом диапазона после "~" в названии стирается и замещается без уведомления новой резервной копией ( Более подробно ). Число файлов в архиве может быть не всегда известно заранее или оно может быть больше диапазона доступных чисел, так что "Unzip -B" не лучший вариант. Переименование файлов с одинаковыми именами с помощью добавления "~" в конце имен, после расширения тоже не слишком удобно. Но другой встроенный вариант еще хуже. Если модификатор "-B" не используется, то каждый раз, как распаковывается файл с таким же именем как уже был извлечен, unzip спрашивает "replace example.txt? [y]es, [n]o, [A]ll, [N]one, [r]ename:" ("заместить example.txt? да, нет, все, ни один, переименовать:"). Каждый раз нужно нажимать на "r" и каждый раз вводить новое имя. Так что для решения проблемы вероятно следует создать и использовать какой-то скрипт, bash или иной.

Горизонтальное выравнивание блока неизвестной ширины

 

Горизонтальное выравнивание блока неизвестной ширины, содержащего несколько строчных элементов. Блок выравнивается средствами CSS - [ Открыть страницу-пример ]. Иногда нужно выровнять по центру группу плавающих элементов, которая будет служить заголовком или блоком с нумерацией страниц. Поскольку заголовок будет использоваться для блоков разных размеров, а блок с нумерацией страниц может увеличиваться и уменьшаться в размерах, то ширина этой группы так же будет варьировать случайным образом. Отчего способ выравнивания по центру, базирующийся на использовании известной ширины, работать не будет. Так же, желательно, что бы блок заголовка или нумерации страниц был центрирован раз и навсегда при своем создании, что бы группа элементов могла быть использована с объектами разных размеров, на разных веб страницах: блок просто кладется куда надо, а в него помещаются текст или / и изображения - и группа выравнивается по центру автоматически. Это можно сделать разными способами и с использованием разных технологий: CSS, CSS + JavaScript, CSS + HTML (система с тегами <table></table>). Самый простой и надежный способ горизонтального выравнивания блока неизвестной ширины основан на использовании CSS. Горизонтальное выравнивание блока неизвестной ширины: 1. Сначала, более простой случай, горизонтальное выравнивание блока с заголовком, состоящего из плавающих элементов: изображения и текст: HTML / XHTML. Код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>Горизонтальное выравнивание блока неизвестной ширины: 1</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" /> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <div class="box"> <span class="title-box"> <img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" /> <span class="title-text">Горизонтальное выравнивание блока неизвестной ширины</span> <img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" /> </span> </div> </body> </html> CSS.