Bootstrap表列宽度未变

Question

“更多表格”列的宽度没有用ggplot(data=reactivelab(), aes(x=ADY, y=AVAL, text = paste("Lab Parameter:", PARAM, "<br>Lab Test Day:", ADY, "<br>Lab Standard Value:", AVAL, "<br>Normal Range Upper Limit:", ANRHI, "<br>Normal Range Lower Limit:", ANRLO)))

我需要此列table-responsive宽Well Type

200px

Answer 1

解决方案是设置min-width，而不是像下面示例中那样设置width。

  

请注意，HTML5不支持您使用的<th>的width属性，并且不应再使用它。

     

返回主题：根据table-layout documentation，大多数浏览器都在使用自动表格布局算法。我认为这就是如果表太宽会导致CSS覆盖的原因。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="table-responsive">
        <table class="table table-bordered">
          <tbody>
            <tr>
              <th></th>
              <th></th>
              <th style="min-width: 200px;"></th>
              <th></th>
              <th></th>
              <th></th>
              <th class="text-center" colspan="2">Problem</th>
              <th class="text-center" colspan="2">Inactive Category</th>
              <th class="text-center" colspan="3">Action</th>
              <th></th>
              <th class="text-center" colspan="2">Validation</th>
              <th class="text-center" colspan="2">Endorsed</th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
            </tr>
            <tr>
              <th>Well No</th>
              <th>String</th>
              <th>Well Type</th>
              <th>Reservoir</th>
              <th>Downtime Start/Rig Release</th>
              <th>Downtime (in days)</th>
              <th>Code</th>
              <th>Description</th>
              <th>Code</th>
              <th>Description</th>
              <th>Code</th>
              <th>Description</th>
              <th>Planned Date</th>
              <th>Expected Rate</th>
              <th>Status</th>
              <th>Remarks</th>
              <th>Status</th>
              <th>Remarks</th>
              <th>Action Category</th>
              <th>Project</th>
              <th>Case</th>
              <th>Attachments</th>
              <th>Remarks</th>
              <th></th>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td>Well No</td>
              <td>String</td>
              <td>Well Type</td>
              <td>Reservoir</td>
              <td>Downtime Start/Rig Release</td>
              <td>Downtime (in days)</td>
              <td>Code</td>
              <td>Description</td>
              <td>Code</td>
              <td>Description</td>
              <td>Code</td>
              <td>Description</td>
              <td>Planned Date</td>
              <td>Expected Rate</td>
              <td>Status</td>
              <td>Remarks</td>
              <td>Status</td>
              <td>Remarks</td>
              <td>Action Category</td>
              <td>Project</td>
              <td>Case</td>
              <td>Attachments</td>
              <td>Remarks</td>
              <td>
                <a href="#">Edit</a>
                <a href="#">Cancel</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>