How place a checkbox into the center of a table cell?
Last Updated :
23 Jun, 2020
A checkbox can be placed in the center of the table cell by either using the plain CSS stylesheet or with the help of bootstrap. Here we will be seeing different ways to center the checkbox in a cell of the table using pure CSS.
Method 1:
In this method, we are using the display FlexBox property to center the checkbox in the cell of the table.
Note: This method will not make the text after the checkbox to be treated as the block element and text entered after the check will be visible
Example:
<!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>
<tr>
<td class="checkbox">Geeks for Geeks</td>
<td class="checkbox">Geeks for Geeks</td>
</tr>
<tr>
<td class="checkbox">
<input type="checkbox">
</td>
<td class="checkbox">
<input type="checkbox">
</td>
</tr>
</table>
</body>
</html>
|
Output:
Method 2:
In this method, we will be using Text align center property of the CSS to center the checkbox in the cell.
Note: This method will center everything in the td of the table.
Example:
<!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>
|
Output:
Share your thoughts in the comments
Please Login to comment...