Question

在Bootstrap表上仅使用CSS。（如果没有其他简单方法，可以使用一些JavaScript）

如何获取复选框的<label>元素以完全填充表格单元格？

Bootstrap的填充量为8px，但我不想破坏其他单元格的填充，并保持表格的响应。

示例：

<table class="table table-striped table-condensed">
    <tr>
        <td>
            <label>
                <input type="checkbox"/>
            </label>
        </td>
    </tr>
</table>

Answer 1

将类添加到特定的td并为label和td：

应用自定义css

table {
  border-collapse: collapse;
}
td {
  padding: 8px;
  background-color: #ddd;
  border: 1px solid #898989;
}
.labeled {
  padding: 0;
}
.labeled label {
  display: inline-block;
  padding: 8px;
  background-color: rgba(0, 200, 0, .3);
}

<table class="table table-striped table-condensed">
  <tr>
    <td class="labeled">
      <label>
        <input type="checkbox" />
      </label>
    </td>
    <td>
      Other TD
    </td>
  </tr>
</table>

Answer 2

虽然@Justinas的答案更优雅，但您也可以在不改变类的情况下完成：

＆＃13;

table {
  border-collapse: collapse;
}
td {
  padding: 8px;
  background-color: #ddd;
  border: 1px solid #898989;
}

td > label {
  display: inline-block;
  margin: -8px;
  padding: 8px;
  background-color: rgba(0, 200, 0, .3);
}

＆＃13;

<table class="table table-striped table-condensed">
  <tr>
    <td>
      <label>
        <input type="checkbox" />
      </label>
    </td>
    <td>
      Other TD
    </td>
  </tr>
</table>

＆＃13;

单击Bootstrap Table Cell选中一个复选框

2 个答案: