复选框宽度如何填充表格单元格？答案

【问题标题】：how can checkbox width fill the tablecell?复选框宽度如何填充表格单元格？
【发布时间】：2016-02-02 16:39:13
【问题描述】：

这是我的代码：

    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）。我的意思是每个单元格都填充一个复选框。如果我更改复选框的宽度，它不会在 fierfox 浏览器中工作。如果可能的话，我该怎么做？

【问题讨论】：

在我的 Firefox 中运行良好：jsfiddle.net/m6rn8apz
你用的是什么版本？
您的 safari 和 chrome 行中可能存在拼写错误，您在此处将比例设置为 3 而不是 2。这导致它在基于 webkit 的浏览器中不适合我。
首先使用有效的 HTML，所以唯一的 ID。不要设置 ID #td_check，而是应用类 .td_check。您为什么要实现这一目标？
我建议获取单元格和复选框的offsetWidth 和offsetHeight 并计算比例以缩放复选框。复选框很难设置样式，here 是一些提示。

标签： html css checkbox

【解决方案1】：

创建您自己的复选框。

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

【讨论】：

【解决方案2】：

您可以使用纯 css 而不是 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>

【讨论】：