gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:26:18 26 4
gpt4 key购买 nike

我正在使用 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 上。

最佳答案

你可以将这个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

关于html - 具有动态行高问题的表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37701353/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com