Bootstrap Table

by jipexu

HTML

<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<script src="https://rawgit.com/jipexu/npds_dune/master/revolution_16/lib/bootstrap-4.0.0-alpha.2/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/jipexu/npds_dune/master/revolution_16/lib/bootstrap-4.0.0-alpha.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/jipexu/npds_dune/master/revolution_16/themes/npds-boost/style/style.css">
<link rel="stylesheet" href="https://rawgit.com/jipexu/npds_dune/master/revolution_16/lib/bootstrap-table/dist/bootstrap-table.min.css">
<div class="card card-block">
  <table data-toggle="table">
    <thead>
      <tr>
        <th class="col-xs-3" data-sortable="true" data-align="right">Browsers</th>
        <th class="col-xs-6" data-sortable="true" data-halign="center" data-align="right">%</th>
        <th class="col-xs-3" data-align="right">-</th>
      </tr>
    </thead>
    <tbody>
      <tr data-index="0">
        <td style="text-align: right; "> MSIE <img src="themes/npds-boost/images/stats/explorer.gif" alt="MSIE_ico"></td>
        <td style="text-align: right; ">
          <div class="graph"><strong class="bar" style="width: 1.170%;">1.170%</strong></div>
          <progress class="progress" value="1.170" max="100">
            <div class="progress">
              <span class="progress-bar" style="width:1.170%;">1.170%</span>
            </div>
          </progress>
        </td>
        <td style="text-align: right; ">944</td>
      </tr>
    </tbody>
  </table>
</div>