CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-table
Vic
Vic

Reputation: 637

Fixing Bootstrap Table Column Width

I want to fix the width of particular columns in my Bootstrap table. I have tried everything I could find on the documentation and forum:

Adding the data-width attribute to the <th> tag pursuant to the Bootstrap Table documentation:

<th data-width= 20 data-field="0" data-sortable="true" data-align="left" data-valign="middle">Car Model</th>

Adding class="col-xs-4" to the <th> tag:

<th class="col-xs-4" data-field="0" data-sortable="true" data-align="left" data-valign="middle">Car Model</th>

and lastly, changing the CSS property of the column:

.table tr td:nth-child(3) {width:50%;}

Unfortunately, none of the methods above worked. I wonder if I have written the wrong code or some of my codes are conflicting with each other. I would very much appreciate your help!

Here is my table:

http://jsfiddle.net/mademoiselletse/bypbqboe/56/

Upvotes: 2

Views: 7170

Answers (1)

Adam Jenkins
Adam Jenkins

Reputation: 55613

Table-cells take your sizes as suggested, and try to use them if they can, but if the content doesn't allow it, then your sizes won't be respected.....unless you use the following property on your table:

table-layout: fixed

I may have oversimplified a little, read more about the exact reason why this works (assuming your first row contains small amounts of text - which it usually does because they are usually column headers), here:

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

Upvotes: 2

Related Questions