举表调整

Question

这里是我的UI

这里是我的代码

<div class="container"> 
    <table id="headerTable" class="table table-bordered "> 
    <thead class="thead-default"> 
     <tr> 
     <th colspan="2">電文Header</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th>Filler1</th> 
      <td><input id="123" type="text" class="input-sm"></td> 
     </tr> 
     <tr> 
      <th>MessageType</th> 
      <td><input id="123" type="text" class="input-sm"></td> 
     </tr> 
     <tr> 
      <th>MessageLength</th> 
      <td><input id="123" type="text" class="input-sm"></td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

如何调整，使之更小的像下面？

谢谢

Answer 1

<div class="container"> 
<table id="headerTable" class="table table-bordered "> 
    <thead class="thead-default"> 
     <tr> 
      <th colspan="2">電文Header</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th class="col-sm-1">Filler1</th> 
      <td class="col-sm-11"> 
       <input id="123" type="text" class="input-sm"> 
      </td> 
     </tr>    
     <tr> 
      <th class="col-sm-1">MessageType</th> 
      <td class="col-sm-11"> 
       <input type="text" class="input-sm"> 
      </td> 
     </tr> 
     <tr> 
      <th class="col-sm-1">MessageLength</th> 
      <td class="col-sm-11"> 
       <input type="text" class="input-sm"> 
      </td> 
     </tr> 
    </tbody> 
</table> 

只要把在Bootstrap Grid类，以便<th>和<td>元素不会太宽。 请参阅https://www.bootply.com/BLINHddRZV输出。

编辑：没有看到它使用bootstrap4。请检查this问题和mdo的回复。显然，网格类不再支持表格。