narqo/dabblet.css

## dabblet.css
/**
* Table row with border-radius and box-shadow playgroud
*/
html{
    min-height:100%;
}
body{
    background-image:-o-linear-gradient(top, #fff, #dcdcdc);
    background-image:-moz-linear-gradient(top, #fff, #dcdcdc);
    background-image:-webkit-linear-gradient(top, #fff, #dcdcdc);
    background-image:linear-gradient(top, #fff, #dcdcdc);

    font:82.5%/1.6em Arial, sans-serif;

    margin:1em 2em;
    padding:0;
}

table{
    border:0;
    border-collapse:separate;
    border-spacing:0px;

    font:1em/1.4em Arial, sans-serif;
}
    tr{
        vertical-align: top;
    }

        tr:hover{
            /* hello firefox */
            box-shadow:3px 5px 6px -4px rgba(0,0,0,0.8);
        }
            /* webkit + opera */
            td{
                position:relative;
            }
        	tr:hover td::before{
            	    background-color:#e2f3ac;
            	    background-image:-o-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));
            	    background-image:-webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));
                    background-image:linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));

            	    box-shadow:3px 5px 6px -4px rgba(0,0,0,0.8);

                    border-radius:5px;

                    display:block;
                    padding:0 9px 0 0;

                    content:'';
                    position:absolute;
                    left:0;
                    top:0;
                    z-index:-1;

                    width:100%;
                    height:100%;
        	}
            	tr:hover td:last-child::before{
            	   padding-right:0;
            	}

            /* opera */
            noindex:-o-prefocus, td::before{
                border-radius:0 !important;
            }

            /* firefox */
            tr:hover td, x:-moz-any-link{
                background-color:#e2f3ac;
                background-image:-moz-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));

                position:static;
            }
            tr:hover td::before, x:-moz-any-link{
                background:none;

                display:none;
                position:static;

                padding:0;
            }

    td{
        padding:10px 30px;
    }
        td:first-child{
            padding-left:22px;
        }
        td:last-child{
            text-align:right;
        }

.note{
    font-size:0.85em;
    line-height:1.2em;

    display:block;
}


## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<table>
    <tr>
        <td>5 звезд <span class="note">Щелково</span></td>
        <td>10:15 16:45</td>
        <td>750</td>
    </tr>
    <tr>
        <td>5 звезд <span class="note">Бирюлево</span></td>
        <td>10:15 12:30</td>
        <td>400</td>
    </tr>
    <tr>
        <td>5 звезд на Павелецкой</td>
        <td>10:15 16:20</td>
        <td>1400</td>
    </tr>
    <tr>
        <td>Kinostar De Lux <span class="note">Химки</span></td>
        <td>10:50 15:30</td>
        <td>700</td>
    </tr>
    <tr>
        <td>Kinostar De Lux Теплый Стан</td>
        <td>10:50 15:00</td>
        <td>400</td>
    </tr>
    <tr>
        <td>Kinostar Miami</td>
        <td>10:20 14:45</td>
        <td>10&#160;300</td>
    </tr>
    <tr>
        <td>Kinostar New York</td>
        <td>10:20 12:35 17:10</td>
        <td>600</td>
    </tr>
    <tr>
        <td>Брест</td>
        <td>10:30 16:20 22:10</td>
        <td>350</td>
    </tr>
    <tr>
        <td>Бульвар</td>
        <td>17:45</td>
        <td>420</td>
    </tr>
    <tr>
        <td>Каро Фильм «Киргизия»</td>
        <td>9:25 17:00</td>
        <td>600</td>
    </tr>
    <tr>
        <td>Каро Фильм на Вернадского</td>
        <td>9:10 13:15 17:20 21:25 1:30</td>
        <td>410</td>
    </tr>
</table>

## settings.json
{"view":"separate","prefixfree":"","page":"css"}
	/**
	* Table row with border-radius and box-shadow playgroud
	*/
	html{
	min-height:100%;
	}
	body{
	background-image:-o-linear-gradient(top, #fff, #dcdcdc);
	background-image:-moz-linear-gradient(top, #fff, #dcdcdc);
	background-image:-webkit-linear-gradient(top, #fff, #dcdcdc);
	background-image:linear-gradient(top, #fff, #dcdcdc);

	font:82.5%/1.6em Arial, sans-serif;

	margin:1em 2em;
	padding:0;
	}

	table{
	border:0;
	border-collapse:separate;
	border-spacing:0px;

	font:1em/1.4em Arial, sans-serif;
	}
	tr{
	vertical-align: top;
	}

	tr:hover{
	/* hello firefox */
	box-shadow:3px 5px 6px -4px rgba(0,0,0,0.8);
	}
	/* webkit + opera */
	td{
	position:relative;
	}
	tr:hover td::before{
	background-color:#e2f3ac;
	background-image:-o-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));
	background-image:-webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));
	background-image:linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));

	box-shadow:3px 5px 6px -4px rgba(0,0,0,0.8);

	border-radius:5px;

	display:block;
	padding:0 9px 0 0;

	content:'';
	position:absolute;
	left:0;
	top:0;
	z-index:-1;

	width:100%;
	height:100%;
	}
	tr:hover td:last-child::before{
	padding-right:0;
	}

	/* opera */
	noindex:-o-prefocus, td::before{
	border-radius:0 !important;
	}

	/* firefox */
	tr:hover td, x:-moz-any-link{
	background-color:#e2f3ac;
	background-image:-moz-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.3));

	position:static;
	}
	tr:hover td::before, x:-moz-any-link{
	background:none;

	display:none;
	position:static;

	padding:0;
	}

	td{
	padding:10px 30px;
	}
	td:first-child{
	padding-left:22px;
	}
	td:last-child{
	text-align:right;
	}

	.note{
	font-size:0.85em;
	line-height:1.2em;

	display:block;
	}
	<!-- content to be placed inside <body>…</body> -->
	<table>
	<tr>
	<td>5 звезд <span class="note">Щелково</span></td>
	<td>10:15 16:45</td>
	<td>750</td>
	</tr>
	<tr>
	<td>5 звезд <span class="note">Бирюлево</span></td>
	<td>10:15 12:30</td>
	<td>400</td>
	</tr>
	<tr>
	<td>5 звезд на Павелецкой</td>
	<td>10:15 16:20</td>
	<td>1400</td>
	</tr>
	<tr>
	<td>Kinostar De Lux <span class="note">Химки</span></td>
	<td>10:50 15:30</td>
	<td>700</td>
	</tr>
	<tr>
	<td>Kinostar De Lux Теплый Стан</td>
	<td>10:50 15:00</td>
	<td>400</td>
	</tr>
	<tr>
	<td>Kinostar Miami</td>
	<td>10:20 14:45</td>
	<td>10 300</td>
	</tr>
	<tr>
	<td>Kinostar New York</td>
	<td>10:20 12:35 17:10</td>
	<td>600</td>
	</tr>
	<tr>
	<td>Брест</td>
	<td>10:30 16:20 22:10</td>
	<td>350</td>
	</tr>
	<tr>
	<td>Бульвар</td>
	<td>17:45</td>
	<td>420</td>
	</tr>
	<tr>
	<td>Каро Фильм «Киргизия»</td>
	<td>9:25 17:00</td>
	<td>600</td>
	</tr>
	<tr>
	<td>Каро Фильм на Вернадского</td>
	<td>9:10 13:15 17:20 21:25 1:30</td>
	<td>410</td>
	</tr>
	</table>