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

 

Extract tar.gz

 

Extracting tar.gz files in Linux, command line: tar zxvf file.tar.gz - z : filter the archive through gzip [ 1 ] - x : extract files from an archive - v : list the files processed - f : use archive file The command extracts the contents of a compressed archive to the current directory. Tar creates an archive of one or several files. Then gzip is used to compress it. Or both processes are made at once by tar only, with corresponding options employed. The duality of nature - archived and compressed after - is reflected in the extension of the file ("tar.gz") and requires two procedures to be performed while extracting: decompressing and unpacking. Hence both z (decompress it) and x (unpack it) in the command. [ 1 ] Sources for the option letters description: tar(1) - Linux man page and LinuxCommand.org

JavaScript + CSS centering

 

Centering content of a web page by means of JavaScript and CSS. A block containing the content of a page is JavaScript + CSS centered horizontally and vertically. Two cases: 1. A block is centered, if screen resolution is equal to or greater than 1024x768 - [ Open demo page ] 2. A block is centered, if screen resolution is equal to or greater than 1024x768 + mouse cursor is moved over a link in an element of the page content - [ Open demo page ] JavaScript and CSS horizontal and vertical centering. The first case. Step by step. 1. A web page, the part of which is going to be the element the JavaScript + CSS horizontal and vertical centering is to be applied to: 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>JavaScript + CSS horizontal and vertical centering. The first case. Step 1</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" /> <link rel="stylesheet" type="text/css" href="1.css" /> </head> <body>   </body> </html> CSS. Code: html {height: 100%; margin: 0px;} body {background-color: #fff; margin: 0px; height: 100%;} 2. A block element A (grey color) with dimensions declared explicitly, for instance 800 by 500 pixels and with relative positioning is created in the document's body. [ Open demo page ] 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>JavaScript + CSS horizontal and vertical centering. The first case. Step 2</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" /> <link rel="stylesheet" type="text/css" href="2.css" /> </head> <body> <div class="element_A">&nbsp;</div> </body> </html> CSS.