动态行高问题表

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

我发现了如何使这项工作，从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 2

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

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

Answer 3

您可以将此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