css - 如何调整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

将宽度设置为 100%，表格布局的样式必须固定。

你可以这样做:

<table style="width: 100%; display: table; table-layout: fixed;" class="table table-striped table-bordered text-center table-hover table-responsive">