Bootstrap Tabelle Einstellung

Question

Hier ist meine UI

Hier ist mein Code

<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> 

Wie stelle ich das es kleiner zu machen wie folgt?

danke

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> 

in der Bootstrap Grid Klasse Einfach so, dass <th> und <td> Element nicht zu breit sein würde. Siehe https://www.bootply.com/BLINHddRZV für die Ausgabe.

Edit: Habe nicht gesehen, es verwendet bootstrap4. Bitte überprüfen Sie this Problem und die Antwort von mdo. Anscheinend wird die Grid-Klasse nicht mehr für die Tabelle unterstützt.