Rows of rows and cells are broken

Question

Rows of rows and cells are broken

I have the following style and HTML, but when it is displayed, the table looks broken (all table rows and cells are broken). I do not know why; how can i fix this?

tbody should be of this size: height: calc(100vh - 130px);

the red line defines the size of the table.

edit: I tbody

need scrolling and thead

need to fix it.

jsfiddle: https://jsfiddle.net/zuxq2gr0/11/

.col-lg-12 {
  border: 1px solid red;
}

tbody {
  display: block;
  overflow-y: scroll;
  height: calc(100vh - 130px);
}

tbody > tr {
  display: table;
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="col-lg-8 ">
  <div class="col-lg-12">
    <table class="table table-striped" aurelia-table="">
      <thead>
        <tr>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
      </tbody>
    </table>
    <!--  textarea -->
    <div class="form-group">
      <label class="col-md-12 control-label" for="textarea"></label>
      <div class="row">
        <div class="col-md-12">
          <compose view="./-box.html"></compose>
        </div>
      </div>
    </div>
  </div>
</div>

Run code Hide result

+3

html css twitter-bootstrap

raduken 07 June 17 at 8:35

source to share

4 answers

Fix broken cells

You need to remove display: block from tbody and remove display: table from tr element.

.col-lg-12 {
  border:1px solid red;
}
tbody {
    overflow-y: scroll;
    height: calc(100vh - 130px);
    width: 100%;
}

tbody > tr {
  width: 100%;
}

See fiddle: https://jsfiddle.net/zuxq2gr0/15/

Creating a sticky header

The sticky header depends on the required browser support. The easiest way to do this would be with position: sticky, see at work in this fiddle: https://jsfiddle.net/zuxq2gr0/17/ This only works in modern browsers, but requires prefixes and does not work in IE or Edge (see CanIUse: https://caniuse.com/#search=sticky ). There may be good polines in there, but I haven't tried it.

You can use position: fixed, but then you need to know all your heights and so on. See this code: https://codepen.io/tjvantoll/pen/JEKIu

Other than that, you will probably need to use javascript. There are quite a few tutorials out there that cover javascript sticky headers. I haven't tried them, but here's one of the Codedrops . There are also some questions regarding this topic, for example:

Table header should stay fixed at the top when user scrolls out of view with jQuery

HTML table headers are always visible at the top of the window when viewing a large table

+5

deadfishli 07 June 17 at 8:43

source to share

I think you want it to tbody

keep scrolling. You were on the right track by making it a "Block", but to maintain the line width, you also need to make a blockthead

tbody,thead {
    display:block;
}

tbody{
    overflow-y: auto;
    height: calc(100vh - 130px);

}

Fiddle

You will notice the Thead columns are not the same, the only way I know is to fix it through JS or style each column width with CSS.

Here's a link to another article on the stack:

HTML table with 100% width, with vertical scrolling inside the body

+2

Landy 07 June '17 at 9:22

source to share

just remove <thead>

and <tbody>

, it will work here, this is a demo link Demo

+1

aditya shrivastava 07 June 17 at 8:48

source to share

Trusha · Accepted Answer · 2017-06-07T08:53:46+0000

You need to remove some style according to the following code:

table {
    width: 50%;
}

thead, tbody, tr, td, th {
    display: block;
}

thead th {
    height: 30px;
}

tbody {
    overflow-y: auto;
    height: calc(100vh - 130px);
}

tbody td, thead th {
    float: left;
    width: 20%;
}

tr:after {
    clear: both;
    content: ' ';
    display: block;
    visibility: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="col-lg-8 ">
  <div class="col-lg-12">
    <table class="table table-striped" aurelia-table="">
      <thead>
        <tr>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
        <tr class="">
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>
            <div class="form-group">
              <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6">
                <option value="" selected=""></option>
                <option value="-action"> Action</option>
              </select>
            </div>
          </td>
          <td>
            <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i>
          </td>
        </tr>
      </tbody>
    </table>
    <!--  textarea -->
    <div class="form-group">
      <label class="col-md-12 control-label" for="textarea"></label>
      <div class="row">
        <div class="col-md-12">
          <compose view="./-box.html"></compose>
        </div>
      </div>
    </div>
  </div>
</div>

Run code Hide result

Rows of rows and cells are broken

More articles: