壊れた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

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>

Answer 2

CSS：TBODYおよびTRの両方で

削除表示プロパティは問題があなたのtbodyがそれにdisplay: blockセットを持っており、あなたのtrが持っている

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

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