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

 

ELinks

 

Features : Configuration : Use : Screenshots : Download links ELinks is an effort to create an advanced text-based web browser. It started as a fork based on the code of Links browser. Aiming first to try and realize several features more or less weak / absent in Links. Hence "E" in "ELinks" - "Experimental" [Links]. The success of the effort made it to be understood as "Extended" or "Enhanced". There was a crossroad at the point when Links browser achieved certain level of completeness, surpassing in some areas then the most advanced text mode web browser, Lynx: to move forward into displaying graphics and further beyond pure text or to enhance text-based web surfing experience beyond boundaries reached first by Lynx and then Links browsers - but still keeping it in text mode. The first course resulted into a Links version capable of displaying graphic content of web pages - Links2. The second one is ELinks web browser. Lynx was and is a very mature software in its kind. Its authors conceived and realized a quite elaborate concept of web surfing in text mode with specific abstractions and conventions, which aided to overcome many restrictions and shortages of text-based surfing and created an experience, a world so definitely different from rapidly expanding graphical web. But with the time HTML and hardware moved forward, spread of scripting languages took place, the whole world of presenting, finding and consuming information advanced. New possibilities appeared. Many of them were realized in Links web browser, but then next shift in information visual presentation in web documents - from more of HTML to more of CSS - made new roads open; even still keeping it to be in text mode. And that is where ELinks tries to come: colors in enabled consoles, some CSS positioning and even beginning of JavaScript / ECMAScript support. Technical part of networking (like SSL support) and various text encodings support were pretty strong in Links browser already, but ELinks enhanced some features and made others to be more worked out. ELinks moved forward the concept of text mode web browser, making ELinks the most advanced example of it. Although Lynx still keeps positions pretty strongly. Its concept of text mode web surfing even if being simplifying, bringing different approach to information presentation and handling rather than trying to be resembling to graphical web browsers environment - works quite well. Web documents become more and more complicated in realization and (while having all the inevitable restrictions of text mode web browsing) to follow a different way of handling it is quite competitive to trying to be like mainstream, graphic full featured web browsers of desktop computers. It is like this dilemma for smaller screen mobile devices browsers: to try and imitate full sized display computers or to transform web document and make it corresponding to the characteristics of the environment. Text-based web browsers are used mostly on computers with more or less large displays, so there are less of dimensional restrictions and more temptations: Lynx - to stay restrained, ELinks - to extend it. Features Text-based web browser. Versions for Linux, other *nix systems, Windows, DOS, OS/2, BeOS and some others. HTML ( tables and frames including ). Meagre support for CSS and JavaScript ( More ). Support for 16, 88 or 256 colors palette in capable terminal emulators / consoles. Tabbed browsing, background download with queuing. Mouse support. Editing of text boxes / forms in web pages in external text editor. Shortcuts for URLs. Scripting in Perl, Lua, Guile, Ruby. Passing URI of a web page in ELinks or URI of a link in a web page in ELinks to external applications: from clipboard app (to copy URI and paste it some place else) to other web browser, etc. Control over how HTML of the surfed web pages is rendered: like display frames or not. Bookmarks. And More. HTTP and Proxy authentication. Persistent HTTP cookies. SSL. http, https, ftp, fsp, IPv4, IPv6 and experimentally BitTorrent, gopher, nntp protocols. Configuration Go to "ELinks.

Float bottom

 

There is no "float: bottom" in CSS, but there is a way to achieve it by some other means. Example: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float bottom HTML / XHTML. Code: <div class="box1"> <div class="content1"> <div class="left1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="menu1"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> </div> </div> <div class="bottom1">Float bottom</div> </div> CSS. Code: .box1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .content1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .left1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 64%;} .menu1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 36%;} .bottom1 {position: absolute; bottom: 0px; right: 0px;} /* Extra CSS, just styling the look */ .box1 {color: #ddd; text-align: center;} .content1 {background: #bbb;} .left1 {min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 {padding: 2%; float: right; background: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 p {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%; padding: 0px; margin: 0px;} .menu1 a {color: #ddd; text-decoration: none;} .menu1 a:hover {text-decoration: underline;} .bottom1 {padding: 2%; color: #eee; background: #600;} There is a web page with a div box, containing its content - box1. There are two div boxes inside it: 1. "content1" with the content proper on the left and menu on the right. 2. "bottom1" after the content1.