<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Selenggara Jawatan dan Gred</legend>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="Gred">Gred Jawatan</label>
<div class="col-md-4">
<select id="Gred" name="Gred" class="form-control">
<option value="1">A</option>
<option value="2">B</option>
<option value="">C</option>
<option value="">C</option>
<option value="">E54</option>
<option value="">L54</option>
<option value="">E54/W54</option>
<option value="">W54/E54</option>
<option value="">E52/W52</option>
<option value="">E48</option>
<option value="">L48</option>
<option value="">W48</option>
<option value="">W48</option>
<option value="">F48</option>
<option value="">E48/W48</option>
<option value="">E44</option>
<option value="">W44</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="Skim Perkhidmatan">Skim Perkhidmatan</label>
<div class="col-md-4">
<select id="Skim Perkhidmatan" name="Skim Perkhidmatan" class="form-control">
<option value="1">JUSA - Jawatan Terbuka</option>
<option value="2">JUSA - Pegawai Ehwal Ekonomi</option>
<option value="">JUSA - Pegawai Undang-Undang</option>
<option value="">Pegawai Ehwal Ekonomi</option>
<option value="">Pegawai Undang-Undang</option>
<option value="">Pegawai Ehwal Ekonomi/Akauntan</option>
<option value="">Juruaudit/Akauntan</option>
<option value="">Pegawai Gred 54</option>
<option value="">Juruadit</option>
<option value="">Akauntan</option>
<option value="">Pegawai Teknologi Maklumat</option>
<option value="">Pegawai Tadbir</option>
<option value="">Penolong Pegawai Ehwal Ekonomi</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="kumpulanperkhidmatan">Kumpulan Perkhidmatan</label>
<div class="col-md-4">
<select id="kumpulanperkhidmatan" name="kumpulanperkhidmatan" class="form-control">
<option value="1">Pengurusan Tertinggi</option>
<option value="2">Kumpulan Pengurusan dan Profesional</option>
<option value="">Kumpulan Sokongan I</option>
<option value="">Kumpulan Sokongan II</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="jumlahjawatan">Jumlah Jawatan</label>
<div class="col-md-4">
<input id="jumlahjawatan" name="jumlahjawatan" type="text" placeholder="contoh : 1" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="remarks">Catatan</label>
<div class="col-md-4">
<input id="remarks" name="remarks" type="text" placeholder="catatan" class="form-control input-md">
<span class="help-block"></span>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Tambah</button>
</div>
</div>
</fieldset>
</form>
<div class="span7">
<div class="widget stacked widget-table action-table">
<div class="widget-header">
<i class="icon-th-list"></i>
<h3>Senarai Perjawatan (Hakiki)</h3>
</div> <!-- /widget-header -->
<div class="widget-content">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>No</th>
<th>Kumpulan Perkhidmatan</th>
<th>Skim Perkhidmatan/Jawatan</th>
<th>Gred Jawatan</th>
<th>Jumlah Jawatan</th>
<th>Isi</th>
<th>Kosong</th>
<th>Tindakan</th>
<th class="td-actions"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Pengurusan Tertinggi</td>
<td>JUSA - Jawatan Terbuka</td>
<td>A</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td class="td-actions">
<a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="http://www.jquery2dotnet.com" class="trash"><span class="glyphicon glyphicon-trash"></span></a>
</td>
</tr>
<tr>
<td>2</td>
<td>Pengurusan Tertinggi</td>
<td>JUSA - Jawatan Terbuka</td>
<td>B</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td class="td-actions">
<a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="http://www.jquery2dotnet.com" class="trash"><span class="glyphicon glyphicon-trash"></span></a>
</td>
</tr>
<tr>
<td>3</td>
<td>Pengurusan Tertinggi</td>
<td>JUSA - Pegawai Ehwal Ekonomi</td>
<td>C</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td class="td-actions">
<a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="http://www.jquery2dotnet.com" class="trash"><span class="glyphicon glyphicon-trash"></span></a>
</td>
</tr>
</tbody>
</table>
</div> <!-- /widget-content -->
</div> <!-- /widget -->
</div>
.table-bordered {
border: 1px solid #dddddd;
border-collapse: separate;
border-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table {
width: 100%;
margin-bottom: 20px;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
display: table;
}
.trash { color:rgb(209, 91, 71); }
.flag { color:rgb(248, 148, 6); }
.panel-body { padding:0px; }
.panel-footer .pagination { margin: 0; }
.panel .glyphicon,.list-group-item .glyphicon { margin-right:5px; }
.panel-body .radio, .checkbox { display:inline-block;margin:0px; }
.panel-body input[type=checkbox]:checked + label { text-decoration: line-through;color: rgb(128, 144, 160); }
.list-group-item:hover, a.list-group-item:focus {text-decoration: none;background-color: rgb(245, 245, 245);}
.list-group { margin-bottom:0px; }
}
.widget.widget-table .table {
margin-bottom: 0;
border: none;
}
.widget.widget-table .widget-content {
padding: 0;
}
.widget .widget-header + .widget-content {
border-top: none;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.widget .widget-content {
padding: 20px 15px 15px;
background: #FFF;
border: 1px solid #D5D5D5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.widget .widget-header {
position: relative;
height: 40px;
line-height: 40px;
background: #E9E9E9;
background: -moz-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #e9e9e9));
background: -webkit-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
background: -o-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
background: linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
text-shadow: 0 1px 0 #fff;
border-radius: 5px 5px 0 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1),inset 0 1px 0 white,inset 0 -1px 0 rgba(255,255,255,0.7);
border-bottom: 1px solid #bababa;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
border: 1px solid #D5D5D5;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-webkit-background-clip: padding-box;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
.widget .widget-header h3 {
top: 2px;
position: relative;
left: 10px;
display: inline-block;
margin-right: 3em;
font-size: 14px;
font-weight: 600;
color: #555;
line-height: 18px;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}
.widget .widget-header [class^="icon-"], .widget .widget-header [class*=" icon-"] {
display: inline-block;
margin-left: 13px;
margin-right: -2px;
font-size: 16px;
color: #555;
vertical-align: middle;
