<style>
/* PEMBUNGKUS TABEL */
.perban-table-wrapper {
width: 100%;
max-width: 100%;
margin: 28px 0;
overflow-x: auto;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
/* JUDUL BAGIAN */
.perban-table-title {
margin: 0 0 14px;
font-size: 25px;
font-weight: 700;
line-height: 1.3;
color: #222222;
text-transform: uppercase;
}
/* TABEL */
.perban-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
background-color: #ffffff;
border: 1px solid #d9e1e7;
}
/* HEADER */
.perban-table thead {
background-color: #d9edf7;
}
.perban-table th {
padding: 16px 14px;
border: 1px solid #c9dce6;
color: #202020;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
text-align: left;
vertical-align: middle;
text-transform: uppercase;
}
/* ISI TABEL */
.perban-table td {
padding: 16px 14px;
border: 1px solid #e0e0e0;
color: #333333;
font-size: 14px;
line-height: 1.7;
text-align: left;
vertical-align: top;
word-wrap: break-word;
}
/* WARNA SELANG-SELING */
.perban-table tbody tr:nth-child(even) {
background-color: #f7f7f7;
}
/* EFEK SAAT DISOROT */
.perban-table tbody tr:hover {
background-color: #eef7fb;
}
/* LINK JUDUL */
.perban-table .judul-link {
color: #134f7c;
font-weight: 600;
text-decoration: none;
transition: 0.2s ease;
}
.perban-table .judul-link:hover {
color: #0b7a32;
text-decoration: underline;
}
/* LEBAR MASING-MASING KOLOM */
.perban-table .kolom-nomor {
width: 12%;
}
.perban-table .kolom-tahun {
width: 14%;
}
.perban-table .kolom-tanggal {
width: 20%;
}
.perban-table .kolom-judul {
width: 54%;
}
/* TAMPILAN HP */
@media screen and (max-width: 768px) {
.perban-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.perban-table {
min-width: 760px;
}
.perban-table-title {
font-size: 21px;
}
.perban-table th,
.perban-table td {
padding: 12px 10px;
font-size: 13px;
}
}
</style>
