JSFiddle - React, Tailwind, and code Playground

by agus makmun

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<div class="container">
  <div class="panel panel-body isi-data">
      <style type="text/css" media="print">
      @media print {
      #non-printable { display: none; }
      #printable { display: block; width: 100%;height: 100%;}
      }
      </style>
      <p id="non-printable">
          <a class="btn btn-success" href="javascript:window.print()">
          <span class="glyphicon glyphicon-print" aria-hidden="true"></span>
          Cetak
          </a>
      </p>
      <table class="table table-striped table-bordered" id="printable">
        <thead>
          <tr>
            <th>No</th>
            <th>Mata Kuliah</th>
            <th>SKS</th>
            <th>Nilai</th>
            <th>Keterangan</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Matematika Deskrit</td>
            <td>4</td>
            <td>A</td>
            <td>Ini Keterangan 1</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Pemrograman Web Dinamis</td>
            <td>2</td>
            <td>BC</td>
            <td>Ini Keterangan 2</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Algoritma Pemrograman</td>
            <td>4</td>
            <td>B</td>
            <td>Ini Keterangan 3</td>
          </tr>
          <tr>
            <td colspan="2"><b>Total</b></td>
            <td>25</td>
            <td>A++</td>
          </tr>
        </tbody>
      </table>
  </div>
</div>
</body>