CODEWITHSUNDEEP
htmlcss
Joseph
Joseph

Reputation: 733

CSS style checkbox inside td

i would like to set the checkbox inside a table to middle / center

the dirty way i am using is

<td>
    <input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
</td>

However, i am looking a way that all the checbox inside the table will be centered. So i am come out with a css 

.table td input[type="checkbox"] {
    text-align: center;
}

but the css is not working as expected. how to style it in css?

Upvotes: 1

Views: 8966

Answers (3)

Maharajan
Maharajan

Reputation: 188

try this 

td input[type="checkbox"] {
    width:20px;
    height:20px;
    display:block;
    argin:0px auto;
}

Upvotes: 1

Saad Ansari
Saad Ansari

Reputation: 1

function alerrt() {
    alert("I am centered! checkbox");
} 
table {
  width: 300px;
}
table td {
  min-width: 150px;
  border: 1px solid;
  text-align: center;
  padding:5px;
}
table td lable{
margin-right:10px;
}
<table>
  <tr>
    <td class="centered">
     <lable> please check </lable> <input type="checkbox" onclick="alerrt()" style="text-align:center;" ng-model="x.dedbuffer">
    </td>



  </tr>
</table>

Upvotes: 0

Asons
Asons

Reputation: 87191

Set it on the input's parent, in this case the td.

Updated showing how-to when targeting only specific cells

table td {
    text-align: center;
}


table {
  width: 300px;
}
table td {
  border: 1px solid;
}
table td.centered {
  text-align: center;
}
<table>
  <tr>
    <td class="centered">
      <input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
    </td>

    <td>
      Not centered
    </td>
  </tr>
</table>

If you have more content in same cell, add a wrapper

table {
  width: 300px;
}
table td {
  border: 1px solid;
  text-align: center;
}
table td div {
  text-align: left;
}
<table>
  <tr>
    <td>
      
      <input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">

      <div>
        Not centered
      </div>

    </td>
  </tr>
</table>

Upvotes: 4

Related Questions