Simple Table With UIKIT

<!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);
}

                                    
Alert Bootstrap4 style02

Alert Bootstrap4 style02

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Card 4 Product Style01

Card 4 Product Style01

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Changer le style du scroll bar in html

Changer le style du scroll bar in html

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Input range slider HTML style02

Input range slider HTML style02

Texte Block Posts Style01

Texte Block Posts Style01

Timeline style01

Timeline style01

Timeline style05

Timeline style05

toggle switch style02

toggle switch style02