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

 

Internet Explorer 3. Скриншоты 1

 

Internet Explorer 3, запущенный под Windows 7 (32-bit). Скриншоты 1. Internet Explorer 3: windows.microsoft.com/en-US/windows/upgrade-your-browser Internet Explorer 3: w3schools.com/browsers/browsers_stats.asp Internet Explorer 3: en.wikipedia.org/wiki/Internet_Explorer_3 Internet Explorer 3: ebay.com Internet Explorer 3: kompx.com/en/netscape-3-screenshots-1.htm Internet Explorer 3: twitter.com Скачать Internet Explorer 3: пак, содержащий Internet Explorer версий 3.0, 4.01, 5.01, 5.5, 6.0. В процессе установки можно выбрать какую именно версию установить, или установить несколько, или установить все. Очень вероятно, что все версии, кроме Internet Explorer 3, не будут работать даже в 32-битной Windows 7. Так что если вы хотите попробовать все старые версии Internet Explorer, нужно использовать Windows XP или еще более ранние варианты. Но Internet Explorer 3 работает под 32-битной Windows 7 вполне хорошо.

Netscape 3. Скриншоты 1

 

Netscape 3 запущенный под Windows 7 (32-bit). Скриншоты 1. Netscape 3: netscape.aol.com Netscape 3: w3schools.com/browsers/browsers_stats.asp Netscape 3: en.wikipedia.org/wiki/Netscape_Navigator Netscape 3: ebay.com Netscape 3: kompx.com/en/internet-explorer-3-screenshots-1.htm Netscape 3: twitter.com Скачать Netscape 3. Может так случиться, что под Windows 7 (32-bit) не будет получаться Netscape 3 либо установить, либо запустить. Тогда нужно попробовать установить Netscape 3 с правами Администратора. Когда Netscape 3 установлен как следует, он может вполне хорошо работать под Windows 7 (32-bit).