Bootstrap Table Column ширина не получается

Question

Больше столбца таблицы не получает ширину с table-responsive

Мне нужен этот столбец Well Type ширина 200px

<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 width="200" style="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>

Answer 1

Решением является установка min-width вместо width, как я сделал в примере ниже.

Обратите внимание, что использованный атрибут ширины <th> не поддерживается вHTML5 и больше не должен использоваться.

Перейти к теме: В соответствии с документацией по разметке таблиц большинство браузеров используют алгоритм автоматической разметки таблиц.Я думаю, именно поэтому ваш 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>