動態行高問題表

我使用引導程序創建了一些具有動態高度的列。當任何表格單元必須摺疊時，使所有行更高，其他單元高度的內容保持不變。動態行高問題表

這裏是正在發生的例子：

/* 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，但我想保持一張桌子。

來源

2016-06-08 Rui Cardoso

我不明白這個問題。那麼你是否希望帶有紅色背景的跨度填滿單元格？ –

它希望它填滿整個跨度的高度 –

我找到了一個解決方案，查看我的發貼波紋管。仍然不能標記它是正確的。 –

我發現瞭如何使這項工作，從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>

希望這有助於在未來的人。問題主要在於顯示類型和高度。

來源

2016-06-08 14:39:32

-1

你可以在這裏試試這個：height: auto;

編輯：我missunderstood的問題。如果bootstrap添加了一些，您可以嘗試重置單元格的填充。

來源

2016-06-08 11:46:06 Exar

它確實添加了一些填充，我刪除了它（但忘記在示例中做），但這不是問題。問題是因爲顯示器類型（我猜）它有點增加了自動填充的元素（抱歉，因爲不是非常技術性的問題，但問題是，我不明白如何自動填充顯示器的作品） –

也許有一個在保證金，你必須刪除 – Exar

不，這個問題不是邊際，你可以看到我的工作 –

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

來源

2016-06-08 12:17:58 Poonam

我的工作，但它會複雜的一點點，因爲我們分開輸入複選框。但如果沒有其他事情發生，它會做，謝謝。如果我沒有其他解決方案，我會接受 –

我想出了一個解決方案，所以這不是必需的。無論如何感謝=） –

動態行高問題表

回答

相關問題