bootstrap-table bootstrap4
by Dug Sohn
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<!--script src="https://raw.githubusercontent.com/719media/bootstrap-table/bootstrap4/src/bootstrap-table.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<div class="container bg-dark">
<table class="table table-striped table-condensed bg-dark" id="test_table" data-pagination="true" data-show-columns="true">
<thead>
<tr>
<th data-sortable="true">Name</th>
<th data-sortable="true">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>26</td>
</tr>
<tr>
<td>B</td>
<td>25</td>
</tr>
<tr>
<td>C</td>
<td>24</td>
</tr>
<tr>
<td>D</td>
<td>23</td>
</tr>
<tr>
<td>E</td>
<td>22</td>
</tr>
<tr>
<td>F</td>
<td>21</td>
</tr>
<tr>
<td>G</td>
<td>20</td>
</tr>
<tr>
<td>H</td>
<td>19</td>
</tr>
<tr>
<td>I</td>
<td>18</td>
</tr>
<tr>
<td>J</td>
<td>17</td>
</tr>
<tr>
<td>K</td>
<td>16</td>
</tr>
<tr>
<td>L</td>
<td>15</td>
</tr>
<tr>
<td>M</td>
<td>14</td>
</tr>
<tr>
<td>N</td>
<td>13</td>
</tr>
<tr>
<td>O</td>
<td>12</td>
</tr>
<tr>
<td>P</td>
<td>11</td>
</tr>
<tr>
<td>Q</td>
<td>10</td>
</tr>
<tr>
...
CSS
table tbody tr::after {
content="edit";
display:block;
position:absolute;
}
JavaScript
$(function() {
$('#test_table').bootstrapTable({});
});