Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript" src="main.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
​
</head>
​
<body>
​
    <div class="stable">
​
        <div class="srow">
            <div class="scell"><input type="text" value="Students Names" disabled /></div>
            <div class="scell"><input type="text" value="Course0" disabled /></div>
            <div class="scell"><input type="text" value="Course1" disabled /></div>
            <div class="scell"><input type="text" value="Course2" disabled /></div>
        </div>
​
        <div class="srow">
            <div class="scell"><input type="text" class="value" value="Diomidis"/></div>
            <div class="scell val"><input type="text" class="value" value="85"/></div>
            <div class="scell val"><input type="text" class="value" value="92"/></div>
            <div class="scell val"><input type="text" class="value" value="56"/></div>
        </div>
​
        <div class="srow">
            <div class="scell"><input type="text" class="value" value="Eirini" /></div>
            <div class="scell val"><input type="text" class="value" value="75"/></div>
            <div class="scell val"><input type="text" class="value" value="80"/></div>
            <div class="scell val"><input type="text" class="value" value="45"/></div>
        </div>
​
        <div class="srow">
            <div class="scell"><input type="text" class="value" value="Eleni" /></div>
            <div class="scell val"><input type="text" class="value" value="92"/></div>
            <div class="scell val"><input type="text" class="value" value="76"/></div>
            <div class="scell val"><input type="text" class="value" value="88"/></div>
        </div>
​
        <div class="srow">
            <div class="scell"><input type="text" class="value" value="Giannis" /></div>
            <div class="scell val"><input type="text" class="value" value="38"/></div>
            <div class="scell val"><input type="text" class="value" value="49"/></div>
            <div class="scell val"><input type="text" class="value" value="96"/></div>
        </div>
​
        <div class="srow">
            <div class="scell"><input type="text" class="value" value="Dionisis" /></div>
            <div class="scell val"><input type="text" class="value" value="65" /></div>
            <div class="scell val"><input type="text" class="value" value="79" /></div>
            <div class="scell val"><input type="text" class="value" value="91" /></div>
        </div>
​
        <div class="srow">
            <div class="scell"><input type="text" class="value" value="Kostas" /></div>
            <div class="scell val"><input type="text" class="value" value="63" /></div>
            <div class="scell val"><input type="text" class="value" value="84" /></div>
            <div class="scell val"><input type="text" class="value" value="87" /></div>
        </div>
​
        <div class="srow res-btn">
            <div class="scell" onclick="showResults();">Show Results</div>
        </div>
​
    </div>
​
    <div id="student-results">
    </div>
​
</body>
</html>
 
* {
    font-family: "Open Sans", Arial, sans-serif;
}
​
html, body {
    text-align: center;
}
​
.stable {
    display: inline-block;
    background-color: #e1e1e1;
    border-radius: 2px;
    padding: 4px;
    margin: 15px auto;
}
​
    .stable .srow {
        display: block;
        width: 100%;
        padding: 0px;
        margin: 0px;
        font-size: 0px;
    }
​
        .stable .srow .scell {
            width: 150px;
            padding: 0px;
            margin: 3px;
            display: inline-block;
            overflow: hidden;
            height: 50px;
            background-color: #f4f4f4;
            color: #333;
            font-size: 14px;
        }
​
            .stable .srow .scell input {
                position: relative;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
                font-size: 14px;
                font-weight: bold;
                border: 0px none;
                outline: none;
                text-indent: 5px;
                background-color: transparent;
            }
​
            .stable .srow .scell,
            .stable .srow .scell input {
                transition: background-color .15s ease;
            }
​
                .stable .srow .scell input:focus {
                    background-color: #eeeeee;
                }
​
        .stable .srow.res-btn {
            text-align: right;
        }
​
            .stable .srow.res-btn .scell {
                text-align: center;
                line-height: 50px;
                font-family: Arial;
                font-size: 16px;
                font-weight: bold;
                cursor: pointer;
            }
​
                .stable .srow.res-btn .scell:hover {
                    background-color: #7EB2E5;
                }
​
#student-results {
    display: block;
    width: 630px;
    padding: 15px 0px;
    margin: auto;
}
​
    #student-results span {
        display: block;
        margin: 4px 0px;
        text-align: left;
        font-size: 14px;
    }
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers