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

                                    
toggle switch style02

toggle switch style02

bootstrap4 tabs

bootstrap4 tabs

Table Responsive with css 01

Table Responsive with css 01

Simple Table With UIKIT

Simple Table With UIKIT

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Image hover Flip Flap Style

Image hover Flip Flap Style

Image hover 05

Image hover 05

Css Page grid layout

Css Page grid layout

Créer une input search animée

Créer une input search animée

Compteur avec b4

Compteur avec b4

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

Background overlay

Background overlay