Wrap table row to the next line

Details
Written by: Stanko Milosev
Category: HTML
Hits: 17703

Title and content of this article basically I copied from here.

HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="/index.css">
</head>
<body>
    <table id="table_id">
        <tr>
            <td>Column1</td>
            <td>Column2</td>
            <td>Column3</td>
            <td>Column4</td>
            <td>Column5</td>
            <td>Column6</td>
            <td>Column7</td>
            <td>Column8</td>
            <td>Column9</td>
            <td>Column1</td>
            <td>Column2</td>
            <td>Column3</td>
            <td>Column4</td>
            <td>Column5</td>
            <td>Column6</td>
            <td>Column7</td>
            <td>Column8</td>
            <td>Column9</td>
        </tr>
        <tr>
            <td>Column11</td>
            <td>Column21</td>
            <td>Column31</td>
            <td>Column41</td>
            <td>Column51</td>
            <td>Column61</td>
            <td>Column71</td>
            <td>Column81</td>
            <td>Column91</td>
            <td>Column11</td>
            <td>Column21</td>
            <td>Column31</td>
            <td>Column41</td>
            <td>Column51</td>
            <td>Column61</td>
            <td>Column71</td>
            <td>Column81</td>
            <td>Column91</td>
        </tr>
    </table>
</body>
</html>

CSS:

body {
    font-size: 20px;
}
 
#table_id  {
    display: block;
    border: 1px solid;
}
 
#table_id tr {
    border: 1px solid;
}
 
#table_id td {
    display: inline-block;
    min-width: 50px;
    border: 1px solid;
    width: 100px;
    min-height: 50px;
}

Example you can see here.

Things to notice are: 

#table_id {
display: block;

and: 

#table_id td {
display: inline-block;

Basically you need only display: block on table to set, and display: inline-block on td.

Idea behind this article was to have responsive table, but after testing I am not satisfied with it. Next thing to test is this article, which at this moment I didn't test.

---

Here is responsive table example.

HTML:

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1" name="viewport">
        <title></title>
        <link type="text/css" rel="stylesheet" href="/index.css">
    </head>
    <body>
        <table id="table_id">

            <thead>
            <tr>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Column4</th>
                <th>Column5</th>
                <th>Column6</th>
                <th>Column7</th>
                <th>Column8</th>
                <th>Column9</th>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Column4</th>
                <th>Column5</th>
                <th>Column6</th>
                <th>Column7</th>
                <th>Column8</th>
                <th>Column9</th>
            </tr>
            </thead>

            <tr>
                <td>Column1</td>
                <td>Column2</td>
                <td>Column3</td>
                <td>Column4</td>
                <td>Column5</td>
                <td>Column6</td>
                <td>Column7</td>
                <td>Column8</td>
                <td>Column9</td>
                <td>Column1</td>
                <td>Column2</td>
                <td>Column3</td>
                <td>Column4</td>
                <td>Column5</td>
                <td>Column6</td>
                <td>Column7</td>
                <td>Column8</td>
                <td>Column9</td>
            </tr>
            <tr>
                <td>Column11</td>
                <td>Column21</td>
                <td>Column31</td>
                <td>Column41</td>
                <td>Column51</td>
                <td>Column61</td>
                <td>Column71</td>
                <td>Column81</td>
                <td>Column91</td>
                <td>Column11</td>
                <td>Column21</td>
                <td>Column31</td>
                <td>Column41</td>
                <td>Column51</td>
                <td>Column61</td>
                <td>Column71</td>
                <td>Column81</td>
                <td>Column91</td>
            </tr>
        </table>
    </body>
</html>

CSS:

/*
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
*/
@media only screen and (max-width: 480px),
(min-device-width: 768px) and (max-device-width: 1024px) {


    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*
    Label the data
    */
    td:nth-of-type(1):before { content: "Column1"; }
    td:nth-of-type(2):before { content: "Column2"; }
    td:nth-of-type(3):before { content: "Column3"; }
    td:nth-of-type(4):before { content: "Column4"; }
    td:nth-of-type(5):before { content: "Column5"; }
    td:nth-of-type(6):before { content: "Column6"; }
    td:nth-of-type(7):before { content: "Column7"; }
    td:nth-of-type(8):before { content: "Column8"; }
    td:nth-of-type(9):before { content: "Column9"; }
    td:nth-of-type(10):before { content: "Column1"; }
    td:nth-of-type(11):before { content: "Column2"; }
    td:nth-of-type(12):before { content: "Column3"; }
    td:nth-of-type(13):before { content: "Column4"; }
    td:nth-of-type(14):before { content: "Column5"; }
    td:nth-of-type(15):before { content: "Column6"; }
    td:nth-of-type(16):before { content: "Column7"; }
    td:nth-of-type(17):before { content: "Column8"; }
    td:nth-of-type(18):before { content: "Column9"; }
}

Example you can see here. Problem which I had is something like described here. I had to insert line:

<meta content="width=device-width, initial-scale=1" name="viewport">

and in CSS I am using:

@media only screen and (max-width: 480px),
(min-device-width: 768px) and (max-device-width: 1024px)

Only like this I was able to force example to work in Dolphin browser... 

Async and defer

Details
Written by: Stanko Milosev
Category: HTML5
Hits: 10523

Via Smashing Magazine:

Putting scripts at the bottom of the page is an outdated technique. Use async and defer instead. 

Here is example.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<script src="/defer.js" defer></script>
		<script src="/async.js" async></script>
	</head>
	
	<body>
		<div id="defer">
			If everything is ok, you will not see me
		</div>
		
		<div id="async">
			If everything is ok, you will not see me
		</div>		
	</body>

</html>

Note lines:
<script src="/defer.js" defer></script>
and
<script src="/async.js" async></script>

JS part is simple, just an example, defer.js:

document.querySelector("#defer").innerText = "defer";

async.js:

document.querySelector("#async").innerText = "async";

Overlay

Details
Written by: Stanko Milosev
Category: HTML5
Hits: 10508

In this article I gave an example of HTML5 dialog tag, and in this article I will extend that example with an overlay.

Basically overlay means one div which covers whole page, and with that trick we are disabling user to click anywhere.

CSS looks like this:

.overlay {
	position: absolute;
	height: 100%;
	width: 100%;
}

Then we will need just one div, like:
<div class="overlay"></div>
Whole HTML looks like this:

<!DOCTYPE html>
<html>

	<head>
		<style>
			.overlay {
				position: absolute;
				height: 100%;
				width: 100%;
			}
		</style>
	</head>
	
	<body>
		<div id=lorem>Lorem ipsum</div>
		
		<dialog class="modal">
			<p>This is da dialog!</p>
			<button id="close">Close</button>
		</dialog>
		<button id="show">Open Dialog!</button>
		
	</body>
	
	<script type="text/javascript">	
		var dialog = document.querySelector('dialog');
		var origHTML = document.querySelector('#lorem').innerHTML;
		document.querySelector('#show').onclick = function() {
			document.querySelector('#lorem').innerHTML = '<div class="overlay"></div>' + document.querySelector('#lorem').innerHTML;
			dialog.show();
		};
		document.querySelector('#close').onclick = function() {
			document.querySelector('#lorem').innerHTML = origHTML;
			dialog.close();
		};
	</script>
	
</html>

Here notice how I am adding div tag with overlay class:

document.querySelector('#lorem').innerHTML = '<div class="overlay"></div>' + document.querySelector('#lorem').innerHTML;

Dialog

Details
Written by: Stanko Milosev
Category: HTML5
Hits: 12525
One example of dialog in Chrome, in FireFox it is not working.

HTML: 

<!DOCTYPE html>
<html>
	<body>
	
		<dialog class="modal">
			<p>This is da dialog!</p>
			<button id="close">Close</button>
		</dialog>
		<button id="show">Open Dialog!</button>
		
	</body>
</html>
JS: 
<script type="text/javascript">	
	var dialog = document.querySelector('dialog');
	document.querySelector('#show').onclick = function() {
	  dialog.show();
	};
	document.querySelector('#close').onclick = function() {
	  dialog.close();
	};
</script>
Here note line:

document.querySelector('dialog')

this is something new what I learned today.

Live example:

This is da dialog!

Example taken from this web site, via this one. On Tympanus you can find few more examples of overlay window, if you need support for older browsers.

  1. Customize input type="range"

Subcategories

HTML5

Page 2 of 3