CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Bilal Tariq
Bilal Tariq

Reputation: 3

Unable to Fix the width of colum in bootstrap

I am trying to fix the width of a column(Name: link) but unable to do this below is my code

<table class="table table-striped table-bordered">
<thead>
<th>ID</th>
<th>User</th>
**<th class="col-sm-2">Link</th>**
<th>Charge</th>
<th>Start count</th>
<th>Quantity</th>
<th>Type</th>
<th>Status</th>
<th>Date</th>

But no change in the output of table, can you please tell me what I am doing wronge?

Upvotes: 0

Views: 58

Answers (2)

Christina
Christina

Reputation: 34642

Your html didn't have closing thead or table, but when you format your html correctly, the column class does work. Many people use the classes on the tables.

.col-sm-2 starts at the min-width:768px and it is 16.6666666666667% of the width of the parent (table). It will remain 16.6666666666667% from that min-width and up and will revert to the default width under that.

DEMO: https://jsbin.com/mupeve

<table class="table table-striped table-bordered">
   <thead>
      <th>ID</th>
      <th>User</th>
      <th class="col-sm-2">Link</th>
      <th>Charge</th>
      <th>Start count</th>
      <th>Quantity</th>
      <th>Type</th>
      <th>Status</th>
      <th>Date</th>
   </thead>
</table>

Upvotes: 1

martincarlin87
martincarlin87

Reputation: 11062

remove class="col-sm-2" from the th, that's for the grid, not for tables.

To fix the size of a column, give it a defined width, e.g <th style="width: 150px;"></th> or give it a class name and set the properties there, e.g.:

<th class="small"></th>

th.small {
    width: 150px;
}

Upvotes: 0

Related Questions