Se puede colocar una casilla de verificación en el centro de la celda de la tabla utilizando la hoja de estilo CSS simple o con la ayuda de Bootstrap. Aquí veremos diferentes formas de centrar la casilla de verificación en una celda de la tabla usando CSS puro.
Método 1:
En este método, usamos la propiedad display FlexBox para centrar la casilla de verificación en la celda de la tabla.
Nota: este método no hará que el texto después de la casilla de verificación se trate como el elemento de bloque y el texto ingresado después de la verificación será visible
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* Stylesheet*/
table{
border-collapse: collapse;
padding: 20px;
}
td{
border: 1px solid #000;
padding: 20px;
}
.checkbox{
width: 200px;
background-color:#098043;
color:#fff;
margin: auto;
}
input{
margin: auto;
/*setting margin to auto of the cheeckbox*/
display: flex;/*Flex box property*/
}
</style>
<body>
<!-- Table start-->
<table>
<!-- row start-->
<tr>
<!-- column start-->
<td class="checkbox">Geeks for Geeks</td>
<td class="checkbox">Geeks for Geeks</td>
<!-- Column closed-->
</tr>
<!-- row closed-->
<tr>
<td class="checkbox">
<input type="checkbox">
</td>
<td class="checkbox">
<input type="checkbox">
</td>
</tr>
</table>
</body>
</html>
Producción:
Método 2:
En este método, usaremos la propiedad Centro de alineación de texto del CSS para centrar la casilla de verificación en la celda.
Nota: Este método centrará todo en el td de la tabla.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
table, td{
border-collapse: collapse;
border: 1px solid #000;
padding: 10px;
}
.checkbox{
text-align: center;
/*Centering the text in a td of the table*/
}
</style>
<body>
<table>
<tr>
<td>
Geeks for Geeks
</td>
<td>
Geeks for Geeks
</td>
</tr>
<tr>
<td class="checkbox">
<input type="checkbox">
</td>
<td class="checkbox">
<input type="checkbox">
</td>
</tr>
</table>
</body>
</html>
Producción:
