Simple Table HTML

Simple Table HTML

by Adi Jaya

HTML

<h2>Simple Table HTML</h2>

<div class="table-wrap">
<table class="table">

<thead>
  <tr>
    <th>#</th>
    <th>Jenis</th>
    <th>Harga</th>
  </tr>
</thead>

<tbody>

  <tr>
    <td>1</td>
    <td>Produk 1</td>
    <td>10.000,-</td>
  </tr>
  
  <tr>
    <td>2</td>
    <td>Produk 2</td>
    <td>20.000,-</td>
  </tr>
  <!-- dst -->
  
</tbody>
</table>
</div>

CSS

/*abaikan jika sudah ada*/
* {
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
  font-family : arial;
}

/*global table*/
table {
    border-spacing: 0;
    border-collapse: collapse;
    background-color: transparent;
}

/* custom table dengan class*/
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.table tr:first-child th {
    border-top: 0;
}

.table th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
	text-align: left;
}

.table th, .table td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.table-wrap {
	overflow: auto;
}