Table with dynamic row height issue

Question

I'm creating a table with some columns which has dynamic height using bootstrap. When any of the table cells has to collapse, making all the rows higher, the content of the other cells height stays the same.

Here is an example of what is happening:

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

I want the span to have the cell height so all of it's background becomes red (but not the all cell).

I've try adding height:100% on some cells and rows but doesn't work. I want to keep the row height automatically, so adding a fixed height isn't a solution. I've seen some solutions by using div's like this but I wanted to keep it a table.

Answer 1

You can write this checkbox into individual td and give class = "input-group-addon" to that 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>

check this http://www.bootply.com/xGm9xGA1G7