具有动态行高问题的表格

Question

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

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

/* 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，但我想保留一个表格。

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

Answer 2

在here 的帮助下，我发现了如何完成这项工作。

这是最终结果：

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

.table .checkbox-container {
  vertical-align: top;
  padding: 0;
}

.table .checkbox-container .input-group {
  height: 100%;
}

.table .checkbox-container .input-group-addon {
  border: none;
  border-radius: 0;
  background-color: red;
}

.table .checkbox-container .input-group > input {
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  height: 100%;
}

.table .box {
  height: 100%;
  padding: 0;
  display: inline-block;
}

.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-container">
        <div class="box">
          <div class="input-group fill-during">
            <input id="B17" type="number" class="form-control" min="0/">
            <span class="input-group-addon"><input type="checkbox">NS</span>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

希望它对将来的任何人有所帮助。问题主要出在显示类型和高度上。

Answer 3

你可以在这里试试这个：height: auto;

编辑：我误解了这个问题。如果引导程序添加了一些，您可以尝试重置单元格的填充。