Question

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

这个问题可以在这个小提琴中看到：

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

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

任何人都知道如何解决这个问题？

Answer 1

将此添加到您的css：

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

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

您也可以使用：

.form-control{
    width:40px;
}

使用输入元素的实际宽度并设置要设置的类的宽度（如果您更喜欢使用＆＃34; carSelector＆＃34;类而不是设置宽度）< / p>

Answer 2

添加输入宽度像这样：

style="width: 40px"

您也可以在CSS中声明它

Answer 3

您也可以尝试

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

因此复选框假定空间的其余部分而不是父td

的填充

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

3 个答案: