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

Timeline style08

Timeline style08

Timeline style04

Timeline style04

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Manual Slideshow

Manual Slideshow

Image hover 07

Image hover 07

Image hover 05

Image hover 05

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer