Kompx.com or Compmiscellanea.com

Mobile-friendly HTML table

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 ].

If an HTML table is too wide, having too much data, it may not shrink anymore, it gets wider than the available space and breaks page layout. An horizontal scroll added to the table fixes it up. Example:

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. Code:

<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. Code:

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

/* Extra CSS, just styling the look: */

table {border-collapse: collapse;}

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

Note: the CSS property of display: block makes the table to occupy only as much space horizontally as it is needed to contain the data without shrinking. Not more, not making itself to stretch from the leftmost to the rightmost sides of the available space - even if width: 100% is added to CSS. Example:

123
Table_data_1 Table_data_2 Table_data_3

[ 1 ]

As well as Netscape 9.0.

[ 2 ]

As well as Netscape 9.0.


Aliosque subditos et thema

 

Windows console applications. File managers

 

FAR Manager : DOS Navigator : File Commander The concept and requirements to file manager had formed itself back in the DOS epoch. With the spread of operating systems with graphical user interface, other applications facilitating files handling emerged. But for many tasks and for many users orthodox file managers remain the most convenient option. There are file managers with graphical user interface here for a long time already, however console file managers still hold on not only their proper niche, but as well a part of the space belonging in theory to file managers with a GUI. Nowadays file managers can, all in all, the same and in general the same way, but text-based file managers are more responsive to user actions. Also, even if it is not topical enough now, console file managers require less system resources, than GUI file managers of comparable functionality. FAR Manager - / home page / Console file manager for Windows. Among the built-in functions: FTP, Windows network, extensible archive files support, print manager, text editor. Other plugins are available: SFTP/SCP, image viewer, hex editor, syntax highlighting and auto-completion for text editor, some others. FAR Manager 2.0: Console file manager FAR Manager 2.0: FTP, downloading files FAR Manager 2.0: A submenu FAR Manager 2.0: System settings FAR Manager 2.0: Text editor FAR Manager 2.0: MPlayer, playing .mp3 DOS Navigator - / open source project / Console file manager for Windows. A variation of the DOS file manager. There is also a version for OS/2. Archive files support, text editor with syntax highlighting, disk editor, spreadsheet, calculator, calendar, etc.

CSS centering floated elements

 

Centering an inline block containing several inline elements. The block is centered horizontally - [ Open demo page ]. Sometimes there is a need to have a centered group of floated elements, which is to serve as a title or a pagination box. Since this group of floated elements is going to be used as a title for content blocks of various dimensions or pagination box may grow or shrink in its size, then the width of the group of floated elements is to vary unpredictably as well. So a method of centering based on using a certain known width of the box is not going to work. And as an extra to the task there is a desirable condition: the title or pagination box has to be centered once and for all at the time of the box creation, so that this group of floated elements may be reused without any extra work over it: just place the complex where you need it and put the text or / and images you want to inside it - the group is centered anyway. This problem can be solved by several methods using several technologies: CSS, CSS + JavaScript, CSS + HTML (<table></table> tags system). The CSS centering floated elements is the most simple and reliable. So, here a pure CSS centering of floated elements is discussed. CSS centering floated elements: 1. First, a more simple case, css centering of a title box consisting of floated elements: images and text: HTML / XHTML. Code: <!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="en" lang="en"> <head> <title>CSS centering floated elements: 1</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" /> <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">CSS centering floated elements</span> <img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" /> </span> </div> </body> </html> CSS.