Question

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

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

http://www.bootply.com/yItLpVcKof

我希望跨度具有单元格高度，因此它的所有背景都变为红色（但不是全部单元格）。

我尝试在某些单元格和行上添加height:100%但不起作用。我想自动保持行高，因此添加固定高度不是解决方案。我使用像this之类的div看过一些解决方案，但我想把它保留在桌面上。

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的一些帮助找到了如何完成这项工作。

以下是最终结果：

＆＃13;

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

＆＃13;

HTTPArgument httpArgument = new HTTPArgument();
httpArgument
    .setValue("{ data: {\"title\": \"venkatachalam\", \"body\": \"Venkata\", \"userId\": 3} }");
httpsampler.addTestElement(httpArgument);

＆＃13;

希望它能帮助将来的任何人。问题主要在于显示类型和高度。

Answer 3

您可以在此处尝试：height: auto;

编辑：我很想念这个问题。如果bootstrap添加了一些，可以尝试重置单元格的填充。

包含动态行高问题的表

3 个答案: