htmlテーブルの列の幅を調整するにはどうすればよいですか？

Question

スナップショットに表示される以下の問題は解決できません。私は列の幅を減らそうとしましたが効果はなく、本当に問題を解決できませんか？

これはコードです：

<table class="table table-bordered table-striped table-responsive" id="table1"> 
       <thead> 
        <tr> 
         <th>Sl_no:</th> 
         <th>KPI</th> 
         <th style='width:10px'>Weight(RGoB)</th> 
         <th>Target Achieved(RGoB)</th> 
         <th>Points Scored(RGoB)</th> 
         <th>Weight(External)</th> 
         <th>Target Achieved(External)</th> 
         <th>Points Scored(External)</th> 
        </tr> 
       </thead> 
       <tbody> 
       <?php $id=1; 
        $proposed_kpi=App\Tbl_proposed_KPI::where('activity_id',$approved_activity->activity_id)->get(); 
        foreach($proposed_kpi as $kpi): 
        ?> 
        <?php 
        $approved_kpi=App\Tbl_KPI_approved::where('kpi_id',$kpi->kpi_id)->get(); 
        foreach($approved_kpi as $approved): 
       ?> 

        <tr> 
        <td>{{$id++}}</td> 
        <td>{{$approved->approved_kpi_name}}</td> 
        <td class='td1'>{{$approved->approved_RGoB}}</td> 
        <td class='td2'><input type="text" name="target[]" id="target" style='width:100px' required></td> 
        <td class='td3'><input type="text" name="rgob_score[]" id="rgob_score" style='width:100px;border:none;' placeholder="double click"></td> 
        <td class='external'>{{$approved->approved_external}}</td> 
        <td class='td5'><input type="text" name="target1[]" id="target" style='width:100px' required></td> 
        <td class='td4'><input type="text" name="external_score[]" id="external_score" style='width:100px;border:none;' placeholder="double click"></td> 
        <input type="hidden" name="hidden_id[]" value='{{$approved->kpi_approval_id}}'> 
        </tr> 

       <?php endforeach ?> 
       <?php endforeach ?> 
       </tbody> 
       </table>`enter code here` 

Answer 1

はあなたtable周りdivを入れて、その上にではなく、テーブル自体

<div class="table-responsive"> 
    <table ...> 
    ... 
    </table> 
</div> 

に table-responsiveクラスを置くようにしてください