How can checkbox width fill the table cell?

Question

Here is my code:

    td{
       white-space: nowrap;
     }
    table{
      text-align: center;
    }
    input[type="checkbox"]{
     -ms-transform: scale(2); /* IE */
      -moz-transform: scale(2); /* FF */
      -webkit-transform: scale(3); /* Safari and Chrome */
      -o-transform: scale(2); /* Opera */
      padding: 10px;
    
    }
    #td_check{
    padding-bottom: 0PX;
        padding-top: 4px;
    }

    <table>
    <tr style="border-color:#FFFFFF">
    <td id="td_check"><input name="ch1" type="checkbox"></td>
    <td id="td_check"><input name="ch1" type="checkbox"></td>
    <td id="td_check"><input name="ch1" type="checkbox"></td>
    <td id="td_check"><input name="ch1" type="checkbox"></td>
    <td id="td_check"><input name="ch1" type="checkbox"></td>
    <td id="td_check"><input name="ch1" type="checkbox"></td>
    <td id="td_check"><input name="ch1" type="checkbox"></td>
    <td id="td_check"><input name="ch1" type="checkbox"></td>
    <td id="td_check"><input name="ch1" type="checkbox"></td>
    <td id="td_check"><input name="ch1" type="checkbox"></td>
    <td id="td_check"><input name="ch1" type="checkbox"></td>
    <td id="td_check"><input name="ch1" type="checkbox"></td>
    </tr>
    </table>

I want to every checkbox in the table fill the parent(table cell). I mean every cell fill with a check box. If I change the width of the checkbox it does not work in the Firefox browser.

If it ispossible, how can I do it?

there may be a typo in your safari and chrome line, you set the scale to 3 there instead of 2. This causes it not to work for me in webkit based browsers. — Marijn van Vliet
– Marijn van Vliet, Commented Feb 2, 2016 at 8:04
First start by using valid HTML, so unique IDs. Instead of setting ID #td_check, apply a class .td_check. And why do you want to achieve that ? — mjorissen
– mjorissen, Commented Feb 2, 2016 at 8:04
I'd suggest to get the offsetWidth and offsetHeight of the cell and the checkbox and calculate the ratio to scale the checkbox. Checkboxes are tough to style, here are some hints. — Jan Turoň
– Jan Turoň, Commented Feb 2, 2016 at 8:05

Shai UI · Accepted Answer · 2016-02-02 08:10:48Z

create your own checkbox.

$('.mycheckbox').bind('mousedown',function()
                      {
  var current = $(this).css('background-position');
  
  if (current == '-999px -999px')
      $(this).css('background-position','center');
  else
       $(this).css('background-position','-999px -999px');
  });

td{
   white-space: nowrap;
 }
table{
  text-align: center;
}

.mycheckbox {
  width:100%;
  height:100%;
  background:#eee;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Check_mark_23x20_02.svg/1081px-Check_mark_23x20_02.svg.png);
   background-size: 40px 40px;
    background-repeat: no-repeat;
  background-position: -999px -999px;
}

.td_check {
  width:100px;
  height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr style="border-color:#FFFFFF">
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
<td class="td_check"><div class='mycheckbox'></div></td>
</tr>
</table>

Roland Krinner · Accepted Answer · 2016-02-02 08:39:13Z

You could do this with pure css rather than using JavaScript:

table{
  width:500px;
  border-spacing:0;
  text-align:center;
}

td{
  border:2px solid #ddd;
 }
 
#td_check{
  position:relative;
  height:30px;
}

input[type="checkbox"] {
  display:none;
}

input[type="checkbox"] + label {
 display:block;
 position:absolute;
 width:100%; 
 height:100%;
 top:0;
 left:0;
 background-color:rgba(0,0,0,.3);
 cursor:pointer;
}

input[type="checkbox"] + label:hover ,
input[type="checkbox"]:checked + label {
 background-color:rgba(0,0,0,.5);
}

input[type="checkbox"] + label::after {
  content: '';
  position: relative;
  display: none;
  width: 9px;
  height: 15px;
  border: 3px solid #fff;
  border-top: none;
  border-left: none;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

input[type="checkbox"]:checked + label::after {
   display: inline-block;
   vertical-align:middle;
}

<table>
  <tr>
    <td id="td_check"><input name="ch1" type="checkbox" id="ch1-1"><label for="ch1-1"></label></td>
    <td id="td_check"><input name="ch1" type="checkbox" id="ch1-2"><label for="ch1-2"></label></td>
    <td id="td_check"><input name="ch1" type="checkbox" id="ch1-3"><label for="ch1-3"></label></td>
    <td id="td_check"><input name="ch1" type="checkbox" id="ch1-4"><label for="ch1-4"></label></td>
    <td id="td_check"><input name="ch1" type="checkbox" id="ch1-5"><label for="ch1-5"></label></td>
    <td id="td_check"><input name="ch1" type="checkbox" id="ch1-6"><label for="ch1-6"></label></td>
    <td id="td_check"><input name="ch1" type="checkbox" id="ch1-7"><label for="ch1-7"></label></td>
    <td id="td_check"><input name="ch1" type="checkbox" id="ch1-8"><label for="ch1-8"></label></td>
    <td id="td_check"><input name="ch1" type="checkbox" id="ch1-9"><label for="ch1-9"></label></td>
    <td id="td_check"><input name="ch1" type="checkbox" id="ch1-10"><label for="ch1-10"></label></td>
    <td id="td_check"><input name="ch1" type="checkbox" id="ch1-11"><label for="ch1-11"></label></td>
    <td id="td_check"><input name="ch1" type="checkbox" id="ch1-12"><label for="ch1-12"></label></td>
  </tr>
</table>

Collectives™ on Stack Overflow

How can checkbox width fill the table cell?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related