Table with dynamic row height issue

debugcn Published at Dev

Rui Cardoso

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.

Rui Cardoso

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-19

Comments

0 comments

From Dev

Related Related

Article