CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Bootstrap Table Column width not getting

More table column not getting width with table-responsive

I Need this column Well Type width 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>

Upvotes: 1

Views: 1266

Answers (1)

jsadev.net
jsadev.net

Reputation: 2590

The solution is setting the min-width instead of width like I did in the example below.

Note that the width Attribute of <th> you've used is not supported in HTML5 and should not be used anymore.

Back to topic: According to the table-layout documentation most Browsers are using an automatic table layout algorithm. I think that's why your CSS gets overwritten if the table gets too wide.

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

Upvotes: 1

Related Questions