表格单元格中的复选框：复选框太小答案

【问题标题】：Checkbox in table cell: checkbox is too small表格单元格中的复选框：复选框太小
【发布时间】：2014-07-31 03:40:08
【问题描述】：

我有一个表格，其中每一行的最后一列都包含一个复选框。问题是这些复选框真的很小（在某些时候几乎不可见），只要视口不是不合理的大。

这个Fiddle可以看出问题：

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th># Unit&eacute;</th>
                <th>Mod&egrave;le</th>
                <th>Ann&eacute;e</th>
                <th>Couleur</th>
                <th>Km</th>
                <th>Statut</th>
                <th>Succ.</th>
                <th>Co&ucirc;tant</th>
                <th>M</th>
                <th></th>
                <th>
                    <input type="checkbox" class="form-control" class="carSelector" />
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>
                    <input type="checkbox" class="form-control" class="carSelector" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

我希望复选框始终处于最大状态（例如不在表格单元格内时），如下所示： http://jsfiddle.net/utvqh/

我尝试减少表格单元格的填充，但没有帮助。

有人知道我该如何解决这个问题吗？

【问题讨论】：

标签： html css checkbox twitter-bootstrap-3

【解决方案1】：

将此添加到您的 CSS：

td:last-of-type{
    width:50px;
}

您的表格单元格的宽度未设置，因此它会调整您输入的大小。

你也可以这样用：

.form-control{
    width:40px;
}

尽管使用输入元素的实际宽度并设置要设置的类的宽度（如果您更喜欢使用“carSelector”类来设置宽度）

【讨论】：

【解决方案2】：

添加到输入宽度像这样：

style="width: 40px"

你也可以在 CSS 中声明它

【讨论】：

你应该总是在 CSS 中声明样式

【解决方案3】：

你也可以试试

tbody > tr > td:last-child { 
    padding: 0;
}

所以复选框假定其余空间而不是父td的填充

【讨论】：