舉表調整

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的回覆。顯然，網格類不再支持表格。