I would like my HTML table to have a specific layout and style. Here is a reference image of how I want it to look: Table
The main requirement is for the content/phone number to be centered within each table row, with an edit icon positioned to the right of the same row. I am struggling to determine the correct CSS to achieve this effect. Below is the HTML code along with the CSS I have tried. Any guidance on achieving this layout would be greatly appreciated.
Code
<style>
tr,
td,
th {
border: 1px solid black;
}
/* Additional CSS properties */
...
</style>
<div style="
margin-top: 2rem;
display: flex;
justify-content: center;
align-content: center;
padding-right: 15rem;
padding-left: 15rem;
margin-bottom: 3rem;
">
<table class="table table-striped table-hover" style="display: none" id="table">
<tbody>
<!-- Table rows with specified content placement and edit icon -->
</tbody>
</table>
</div>