Tabel Daftar

Tabel daftar yang berguna untuk menandai daftar pada item-item di artikel.

by Achmad Muharya

HTML

<div class="kotaknya-tabel-daftar">
    <div class="judul-tabel-daftar">Tabel Daftar</div>
    <ol class="daftarnya">
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
        <li>--- Daftar Isinya ---</li>
    </ol>
</div>

CSS

body {
    background: #F5F5F5;
    font-size: 14px;
    font-family:arial;
}
.kotaknya-tabel-daftar {
    width: auto;
    margin: auto;
    background: #FFF;
    padding: 10px 20px;
    margin-top: 10%;
}
<--! .judul-tabel-daftar:before {
    content:'\f0cb';
    font-family:fontAwesome;
    font-size:33px;
    font-style:normal;
    background: #ccc;
    color:#333;
    top:0;
    left:0;
    padding:13px 20px;
    position:absolute
}
--> .judul-tabel-daftar {
    background: #fff;
    color: #333;
    padding: 15px 20px 15px 75px;
    font-weight: normal;
    position: relative;
    text-align: center;
    font-size: 29px;
    border: 2px solid #ccc;
}
ol.daftarnya {
    counter-reset:li;
    /* Memulai penghitungan */
    margin-left:0;
    /* Menghilangkan left margin bawaan */
    padding-left:0;
    /* Menghilangkan left padding bawaan */
}
ol.daftarnya > li {
    position:relative;
    /* Buat posisi konteks */
    margin:0 0 6px 2em;
    /* Berikan setiap daftar item left margin untuk membuat sejumlah ruang untuk nomor */
    padding:3px 8px;
    /* Tambahkan beberapa ruang untuk konten */
    list-style:none;
    /* menon-aktifkan default penomoram item */
    border-top:2px solid #ccc;
    border-bottom:2px solid #ccc;
    border-right:2px solid #ccc;
    background:#fff;
    cursor: default
}
ol.daftarnya > li:before {
    content:counter(li);
    counter-increment:li;
    /* Posisi dan gaya penomoran */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    margin-right:8px;
    padding:4px;
    border-top:2px solid #ccc;
    color:#fff;
    background:#ccc;
    font-weight:bold;
    font-family:sans-serif;
    text-align:center;
}
ol.daftarnya > li:hover, ol > li:hover {
    border-color: #00afaf;
    background-color: #f5f5f5;
}
ol.daftarnya > li:hover:before, ol > li:hover:before {
    background-color: #00afaf;
    border-color:...