html - 具有动态行高问题的表

Question

我正在使用 bootstrap 创建一个包含一些具有动态高度的列的表。当任何表格单元格必须折叠时，使所有行更高，其他单元格高度的内容保持不变。

这是一个正在发生的事情的例子:

/* CSS used here will be applied after bootstrap.css */

.input-group input, .input-group span{
  border: none;
}

span.input-group-addon {
  background-color: red;
}

.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
  <tbody>
    <tr>
      <th>Big word to test multiple line</th>
      <td>Teste</td>
      <td class="checkbox-table">
        <div class="input-group">
          <input type="number" class="form-control" min="0/">
          <span class="input-group-addon"><input type="checkbox">NS</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

http://www.bootply.com/yItLpVcKof

我希望跨度具有单元格高度，因此它的所有背景都变成红色(但不是所有单元格)。

我尝试在某些单元格和行上添加 height:100% 但不起作用。我想自动保持行高，所以添加固定高度不是解决方案。我已经看到一些使用 div 的解决方案，例如 this但我想把它放在一张 table 上。

Answer 1

你可以将这个checkbox写到单独的td中，然后将class = "input-group-addon"赋给那个td.

<tr>
  <th>Energia Elétrica</th>
  <td>Test</td>
  <td class="checkbox-table">
    <div class="input-group">
      <input type="number" class="form-control" min="0/">

    </div>
  </td>
  <td class="input-group-addon"><input type="checkbox">NS</td>
</tr>

检查这个http://www.bootply.com/xGm9xGA1G7