JSFiddle - React, Tailwind, and code Playground

by ox69xo

HTML

<table class="contoh">
    <tr>
      <th>No.</th>
      <th>Nama</th>
      <th>Jenis Kelamin</th>        
    </tr>
    <tr>
        <td>1</td>
        <td>Lala</td>
        <td>P</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Kaka</td>
        <td>L</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Koko</td>
        <td>L</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Jojo</td>
        <td>L</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Kiki</td>
        <td>P</td>
    </tr>    
</table>

CSS

table.contoh {
    border-collapse: collapse;
    border-spacing: 0;
    font-family:'Arial';
    font-size:9pt;
    min-width:100%;
}
table.contoh td, table.contoh th{    
    border:1px solid #999;
    padding:2px;
}
table.contoh th{
    padding:4px 0 4px 0;
    background-color:#b8d0eb;
    border:1px solid #74A4DB;
}
table.contoh td{
    background-color:#9EE3C5;
    border-top:1px solid #74DBAE;
}

/* artinya: setiap "tr" yg urutan genap, akan mempunyai background putih */
table.contoh tr:nth-child(even) td{  
    background-color:#fff;
}