复选框宽度如何填充tablecell？

Question

这是我的代码：

    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>

我希望表中的每个复选框都填充父（tablecell）.i表示每个单元格都填充一个checkbox.if我更改复选框的widh它不会在fierfox浏览器中工作。 如果有可能，我该怎么办？

Answer 1

创建您自己的复选框。

＆＃13;

＆＃13;

$('.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');
  });

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用纯css而不是使用JavaScript来执行此操作：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;