<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 Perjawatan</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="container"> <div class="row col-md-6 col-md-offset-2 custyle"> <table class="table table-striped custab"> <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>Catatan</th> <th class="text-center">Tindakan</th> </tr> </thead> <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></td> <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</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>Pinjaman JPA</td> <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</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></td> <td class="text-center"><a class='btn btn-info btn-xs' href="#"><span class="glyphicon glyphicon-edit"></span> Edit</a> <a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Del</a></td> </tr> </table> </div> </div>

.custab{ border: 1px solid #ccc; padding: 5px; margin: 5% 0; box-shadow: 3px 3px 2px #ccc; transition: 0.5s; } .custab:hover{ box-shadow: 3px 3px 0px transparent; transition: 0.5s; }