Having trouble with aligning checkboxes in a Vue.js application. I want them centered within their table cells, but they keep aligning to the left. When I apply CSS styling to center them, they all unexpectedly align vertically to the leftmost column of the table. How can I fix this alignment issue?
<tbody>
<!-- Loop over roles -->
<template v-for="(characters, role) in categorizedCharacters" :key="role">
<tr @click="toggleRoleVisibility(role)">
<td>{{ role }}</td>
<!-- Placeholder cells for alignment with the header; hidden but keeps the structure -->
<td v-for="event in state.events" :key="`role-${event.title}-${role}`"></td>
</tr>
<!-- Loop over characters within each role -->
<template v-if="state.roleVisibility[role]" v-for="character in characters" :key="character.name">
<tr>
<td>{{ character.name }}</td>
<!-- Generate a cell for each event -->
<td v-for="event in state.events" :key="`signup-${event.title}-${character.name}`" class="checkbox-cell">
<input type="checkbox" :checked="characterSignedUp(character, event)" />
</td>
</tr>
</template>
</template>
</tbody>
.checkbox-cell {
display: flex;
justify-content: center;
align-items: center;
}
https://i.sstatic.net/jhVrW.png
https://i.sstatic.net/JpttO.png
Any assistance would be greatly appreciated. Thank you!