Is there a way to add a button next to the table data in each row without a border? I attempted to create a new column for the button, but the border interferes with the design. I am using Bootstrap 4 for this project.
Here is the HTML code:
<div class="card-body col-10">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Phone</th>
<th>Privilege</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Email</th>
<th>Password</th>
<th>Phone</th>
<th>Privilege</th>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1f2d8d2d5c4cce1d8ced48fc2cecc">[email protected]</a></td>
<td>Edinburgh</td>
<td>081290188409</td>
<td>1</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dc8fa5afa8b9b19ca5b3a9f2bfb3b1">[email protected]</a></td>
<td>Edinburgh</td>
<td>081290188409</td>
<td>1</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1043696364757d50697f653e737f7d">[email protected]</a></td>
<td>Edinburgh</td>
<td>081290188409</td>
<td>1</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4112383235242c01382e346f222e2c">[email protected]</a></td>
<td>Edinburgh</td>
<td>081290188409</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>I am looking to position the button on the right side of the table next to the "Privilege" column. The button should not look like a table.
I experimented with incorporating the button as a table like in the code below:
<div class="card-body col-1">
<div class="tablen float-left">
<table class="table table-borderless" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td><button type="button" class="btn btn-danger fas fa-table float-left"></button></td>
</tr>
</tbody>
</table>
</div>
</div>
However, the button appears too far from the table. I want to align it right next to the table. Any suggestions or solutions would be greatly appreciated. Thank you.