<!DOCTYPE html>
<html lang="en">
<head>
<title>SIMPLE TABLE WITH UIKIT | par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="SIMPLE TABLE WITH UIKIT">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" />
</head>
<body class="uk-padding">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th><strong>POSITION</strong></th>
<th><strong>STATE</strong></th>
<th><strong>Name</strong></th>
<th><strong>Picture</strong></th>
<th><strong>Actions</strong></th>
</tr>
</thead>
<tbody>
<tr>
<th width="5%">1</th>
<th width="15%">
<div class="checkbox mt-3 mb-3 text-right">
<label class="text-muted">
<input type="checkbox" class="ios-switch green bigswitch" checked />
<div>
<div></div>
</div>
</label>
</div>
</th>
<th width="15%">Name name one</th>
<th width="20%">
<img width="20%" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg">
<br>Picture1name.png
</th>
<th width="25%">
<a><i class="uk-text-primary fa fa-2x fa-edit"></i></a>
<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-up"></i></a>
<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-down"></i></a>
<a><i class="uk-text-danger fa fa-2x fa-trash"></i></a>
</th>
</tr>
<tr>
<th width="5%">2</th>
<th width="15%">
<div class="checkbox mt-3 mb-3 text-right">
<label class="text-muted">
<input type="checkbox" class="ios-switch green bigswitch" checked />
<div>
<div></div>
</div>
</label>
</div>
</th>
<th width="15%">Name name two</th>
<th width="20%">
<img width="20%" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg">
<br>Picture1name.png
</th>
<th width="25%">
<a><i class="uk-text-primary fa fa-2x fa-edit"></i></a>
<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-up"></i></a>
<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-down"></i></a>
<a><i class="uk-text-danger fa fa-2x fa-trash"></i></a>
</th>
</tr>
<tr>
<th width="5%">3</th>
<th width="15%">
<div class="checkbox mt-3 mb-3 text-right">
<label class="text-muted">
<input type="checkbox" class="ios-switch green bigswitch" />
<div>
<div></div>
</div>
</label>
</div>
</th>
<th width="15%">Name name three</th>
<th width="20%">
<img width="20%" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg">
<br>Picture1name.png
</th>
<th width="25%">
<a><i class="uk-text-primary fa fa-2x fa-edit"></i></a>
<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-up"></i></a>
<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-down"></i></a>
<a><i class="uk-text-danger fa fa-2x fa-trash"></i></a>
</th>
</tr>
<tr>
<th width="5%">4</th>
<th width="15%">
<div class="checkbox mt-3 mb-3 text-right">
<label class="text-muted">
<input type="checkbox" class="ios-switch green bigswitch" checked />
<div>
<div></div>
</div>
</label>
</div>
</th>
<th width="15%">Name name four</th>
<th width="20%">
<img width="20%" src="https://www.nglesson.com/assets/imgs/menu/integration-web.jpg">
<br>Picture1name.png
</th>
<th width="25%">
<a><i class="uk-text-primary fa fa-2x fa-edit"></i></a>
<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-up"></i></a>
<a><i class="uk-text-secondary fa fa-2x fa-arrow-circle-o-down"></i></a>
<a><i class="uk-text-danger fa fa-2x fa-trash"></i></a>
</th>
</tr>
<tr>
<th width="5%">
<input class="uk-input uk-form-width-small w100" type="number" placeholder="Position">
</th>
<th width="15%">
<div class="checkbox mt-3 mb-3 text-right">
<label class="text-muted">
<input type="checkbox" class="ios-switch green bigswitch" checked />
<div>
<div></div>
</div>
</label>
</div>
</th>
<th width="15%">
<input class="uk-input uk-form-width-small w100" type="text" placeholder="Name">
</th>
<th width="20%">
<input type="text" class="uk-input uk-form-width-small w100" placeholder="LINK Picture" type="url">
</th>
<th width="25%">
<button class="uk-button uk-button-primary uk-button-small w100">
<i class="fa fa-plus"></i> Add new
</button>
</th>
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit-icons.min.js"></script>
</body>
</html>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
* {
margin:0px;
padding:0px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.w100{
width: 100%;
}
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
/* Normal Track */
input[type="checkbox"].ios-switch + div {
vertical-align: middle;
width: 40px; height: 20px;
border: 1px solid rgba(0,0,0,.4);
border-radius: 999px;
background-color: rgba(0, 0, 0, 0.1);
-webkit-transition-duration: .4s;
-webkit-transition-property: background-color, box-shadow;
box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
margin: 15px 1.2em 15px 2.5em;
}
/* Big Track */
input[type="checkbox"].bigswitch.ios-switch + div {
width: 50px; height: 25px; margin-bottom: 0px;
}
/* Green Track */
input[type="checkbox"].green.ios-switch:checked + div {
background-color: #00e359;
border: 1px solid rgba(0, 162, 63,1);
box-shadow: inset 0 0 0 10px rgba(0,227,89,1);
}
/* Normal Knob */
input[type="checkbox"].ios-switch + div > div {
float: left;
width: 18px; height: 18px;
border-radius: inherit;
background: #ffffff;
-webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
-webkit-transition-duration: 0.4s;
-webkit-transition-property: transform, background-color, box-shadow;
-moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
-moz-transition-duration: 0.4s;
-moz-transition-property: transform, background-color;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
pointer-events: none;
margin-top: 1px;
margin-left: 1px;
}
/* Big Knob */
input[type="checkbox"].bigswitch.ios-switch + div > div {
width: 23px; height: 23px;
margin-top: 1px;
}
/* Checked Big Knob (Blue Style) */
input[type="checkbox"].bigswitch.ios-switch:checked + div > div {
-webkit-transform: translate3d(25px, 0, 0);
-moz-transform: translate3d(16px, 0, 0);
}
/* Green Knob */
input[type="checkbox"].green.ios-switch:checked + div > div {
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 162, 63,1);
}
