表格行和单元格已损坏

【问题标题】：table rows and cells are broken表格行和单元格已损坏
【发布时间】：2017-11-08 12:09:14
【问题描述】：

我有以下样式和 HTML，但是当它显示时，表格似乎已损坏（所有表格行和单元格都已损坏）。我不知道为什么；我该如何解决？

tbody 需要这个尺寸：height: calc(100vh - 130px);

红线定义了表格的大小。

编辑：我的tbody 需要滚动，thead 需要修复。

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>

【问题讨论】：

  • 据我了解..你是不是想保持标题固定？
  • 是的，对齐单元格
  • 遗憾的是，仅通过指定 tbody 和 overflow-y 的高度是不可能的。它只是不起作用..您可能必须删除您指定的所有display 并尝试使用可以保持标题固定的插件。
  • 我已经更新了我的答案，它可能会对你有所帮助。

标签： html css twitter-bootstrap


【解决方案1】：

您需要按照以下代码删除一些样式：

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>

【讨论】：

  • 伴侣，overflow-y: scroll height: calc(100vh - 130px) 这对tbody 不起作用，无论如何删除display 属性是对齐问题的有效解决方案。
【解决方案2】：

修复破损的细胞

您需要从 tbody 中删除 display:block 并从 tr 元素中删除 display:table。 

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

tbody > tr {
  width: 100%;
}

见小提琴：https://jsfiddle.net/zuxq2gr0/15/

制作粘性标题

粘性标题取决于您需要的浏览器支持。 最简单的方法是使用 position:sticky，在这个 fiddle 中查看：https://jsfiddle.net/zuxq2gr0/17/ 不过，这只适用于现代浏览器，需要前缀并且在 IE 或 Edge 中都不起作用（请参阅 CanIUse：https://caniuse.com/#search=sticky）。那里可能有很好的 polyfill，但我还没有尝试过。

您可以使用 position: fixed，但是您需要知道所有的身高等等。参考这个codepen：https://codepen.io/tjvantoll/pen/JEKIu

除此之外，您可能还需要使用 javascript。有很多教程涵盖了 javascript 粘性标头。我还没有尝试过，但这是来自Codedrops 的一个。还有一些关于这个主题的SO问题，例如：

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

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

【讨论】：

  • 对不起，tbody 和行中的内容需要对齐，仍然没有
  • 啊好的。我没有从最初的问题中得到这个。也许你可以编辑它？我会看看我能做什么。
  • 嘿，我添加了一些关于粘性表格标题的内容。我没有准备好完整的解决方案，但有一些资源可供查看。
【解决方案3】：

我认为您想要的是 tbody 仍然可以滚动。将其设置为 Block 是正确的，但要保持 Row 的宽度，您还需要将 thead 设置为块

tbody,thead {
    display:block;
}

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

}

Fiddle

您会注意到 Thead 列不对齐，我知道解决此问题的唯一方法是通过 JS 或使用 CSS 设置每个列的宽度。

这里是另一个堆栈文章的链接：

HTML table with 100% width, with vertical scroll inside tbody

【讨论】：

    【解决方案4】：

    只需删除 &lt;thead&gt; 和 &lt;tbody&gt; 即可在此处使用演示链接 Demo

    【讨论】：

    • 这不是解决方案。阅读CSS。这是因为样式错误不是因为&lt;thead&gt; 或&lt;tbody&gt;
    • 看看演示然后说
    • 老兄，删除标准的 html 标签会给你一个解决方案..??严重地？我猜你不知道 CSS
    • 看看演示我已经用它改变了css
    猜你喜欢
    • 1970-01-01
    • 2018-01-31
    • 2016-12-05
    • 1970-01-01
    • 1970-01-01
    • 2014-05-16
    • 2021-03-06
    • 2020-08-13
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode