html - 损坏的 HTML 表格

Question

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

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

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.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>
      </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>

Answer 1

问题是你的 tbody 设置了一个 display: block 而你的 tr 有一个 display: table。你的 css 中的某些东西必须设置它。您可以删除任何设置此设置或通过将以下内容添加到您的 css 来覆盖它。

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

tbody {
  display: table-row-group;
}

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-8 ">
    <div class="col-lg-12">
      <table class="table table-striped" aurelia-table="">
        <thead>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
            <th>test</th>
        </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>
        </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>