HTML table alignment not working - css

Question

I am trying to create a table with one column and 3 rows. I want to take the heading of the table ie. Role in the center and along with that the line below Role, I want to make it small lengthwise. My row values are not aligned properly well. PLease find my attached screenshot
My code
<div style="text-align: center" class="form-group" ng-if="isNew">
<table class="table table-inverse">
<thead>
<tr class="bg-primary">
<th width="14%">
<span>Role</span>
</th>
</tr>
</thead>
</table>
<table class="table table-inverse">
<tr>
<td style="border: none">
<input type="checkbox" name = "role" value = "Super" />Super</td>
</tr>
<tr>
<td style="border: none">
<input type="checkbox" name = "role" value = "Power" />Power</td>
</tr>
<tr>
<td style="border: none">
<input type="checkbox" name = "role" value = "Regular" />Regular</td>
</tr>
</table>
</div>

Answer 1

I applied some CSS and wrapped your checkbox elements in a DIV. Please see the snippet.
th {
width: 100vw;
}
th > span {
width: 14%;
display: inline-block;
border-bottom: 1px #ccc solid;
}
td {
width: 100vw;
text-align: center;
}
.checkbox {
width: 80px;
margin: auto;
text-align: left;
}
.checkbox input {
margin-right: 7px;
}
<div class="form-group" ng-if="isNew">
<table class="table table-inverse">
<thead>
<tr class="bg-primary">
<th>
<span>Role</span>
</th>
</tr>
</thead>
</table>
<table class="table table-inverse">
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name = "role" value = "Super" />Super
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name = "role" value = "Power" />Power
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name = "role" value = "Regular" />Regular
</div>
</td>
</tr>
</table>
</div>