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

                                    
Vidéo background en html5 style01

Vidéo background en html5 style01

Titre section avec une bande style01

Titre section avec une bande style01

Timeline style04

Timeline style04

SwiperJS style01

SwiperJS style01

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Input file style01

Input file style01

Convertir une div en image

Convertir une div en image

Compteur avec b4

Compteur avec b4

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Card 4 Product Style01

Card 4 Product Style01

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire