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.

I dont understand the question. So do you want the span with the red background to fill the cell? — GH Karim, Jun 08 '16 at 11:55
I found a solution, check my post bellow. Still can't mark it was correct. — Rui Cardoso, Jun 08 '16 at 14:43

score 2 · Answer 1 · answered Jun 08 '16 at 12:17

2

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

answered Jun 08 '16 at 12:17

Poonam

549
4
15

I works but it will complicate things a little bit, because we are separating the input from check box. But if nothing else happens it will do, thanks. Will accept if I get no other solution – Rui Cardoso Jun 08 '16 at 12:39
I figured out a solution so this won't be necessary. Thanks anyway =) – Rui Cardoso Jun 08 '16 at 14:42

score 1 · Accepted Answer · edited May 23 '17 at 10:28

I found out how to make this work, with a little bit of help from here.

Here is the final result:

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

Hope it helps anyone in the future. The problem was mainly on the display type and heights.

jovan · Answer 3 · 2016-06-08T11:59:01.080

-1

You can try this here: height: auto;

Edit: i missunderstood the question. You can try to reset the padding of the cells if bootstrap added some.

edited Jun 08 '16 at 11:59

answered Jun 08 '16 at 11:46

jovan

227
1
2
11

It does add some padding, which I removed (but forgot to do it on the example), but that isn't the problem. The problem is because of the display type (I guess) it kinda adds automatic padding to the elements (sorry for not being very technical about it but the problem is that I dont understand how that automatic padding from display works) – Rui Cardoso Jun 08 '16 at 11:57
maybe there is a margin on the , you have to remove – jovan Jun 08 '16 at 12:01
No, the problem aren't the margins as you can see in the fiddle – Rui Cardoso Jun 08 '16 at 13:09

Table with dynamic row height issue

3 Answers3