Fixed width table columns in Bootstrap

Question

I'm using bootstrap 3 for a backend application, this application shows data in tables. At the end of each row there is a delete button (and sometimes also a edit button).

I use col-md-1 for the column that has the delete button, and variations of col-md-x on the other columns, works fine.

One thing that bugs me is that when i enlarge my browser window the col-md-1 column becomes huge, makes sense because of bootstrap grid design. Here's a screenshot:

enter image description here

But it still bugs me every time i look at it.

Is it possible to give a column a fixed width, for example 32 pixels, while keep using the col-md-x feature of bootstrap which i really enjoy?

[edit] maybe a clarification: I'm looking for a maximum width, for example min width 32 and max width 32, then the column should not grow wider than 32 px and shouldn't shrink to less than 32 px.

if 2 col are 50px wide, put a class on both th and make the width:50px with a custom class then on the 2 closest col-X-X find the width, say it's 25% (col-X-3) write css that re-declares that width minus 50px (calc) -- this would be done in the media query. — Christina
– Christina, Commented Nov 10, 2014 at 22:08
@Christina That sounds complicated, but i think i get the idea, you'll get different widths based on the browser width. — TinusSky
– TinusSky, Commented Nov 11, 2014 at 18:01
It's very easy but since you have not put a full example up of your situation, I'm not going to create it for you. — Christina
– Christina, Commented Nov 11, 2014 at 18:03

TinusSky · Accepted Answer · 2014-11-13 08:25:30Z

4

 .tdicon{ width: 32px !important; }

This doesn't work:

<th class="col-md-6"></th>
<th class="col-md-2"></th>
<th class="col-md-4"></th>
<th class="tdicon">&nbsp;</th>
<th class="tdicon">&nbsp;</th>

But this works:

<th class="col-md-6"></th>
<th class="col-md-2"></th>
<th></th>
<th class="tdicon">&nbsp;</th>
<th class="tdicon">&nbsp;</th>

Now the tdicon column becomes 32 px and stays 32 px after resizing. Weird!

I'm happy that is works, but the solution confuses me...

edited Nov 13, 2014 at 8:25

answered Nov 11, 2014 at 17:58

TinusSky

1,7375 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matt Lambert Over a year ago

Did you mean to not close the <th> tags? That will invalidate your HTML

TinusSky Over a year ago

@MattLambert they are closed in my app, didn't want to over complicate my reply by pasting all the code, there is a lot of stuff in the th. But I've edited and added the </th> , just to be correct ;-) Actually still not using my own solution, cause it doesn't make much sense to me... I'll have to dive into bootstrap mechanics on a free evening and see why this works.

beruic Over a year ago

It probably works because the class-less th is allowed to have whatever size, while the col-md-* columns are locked to a percentage. however, why don't you just put your icons in one column and place them in a div with pull-right?

user3931708 · Accepted Answer · 2014-11-10 19:45:44Z

0

it's possible, make your own class in css and define whatever you want and use it with the Column class, for example....

<div class="col-md-1 your-class-here">define some data</div>

use the above strategy, hope it will solve the issue...

answered Nov 10, 2014 at 19:45

user3931708

4 Comments

TinusSky Over a year ago

Cheers for the suggestion, but i already tried that, but i gave it another shot. But it doesn't seem to work, i use .tdicon{ width: 32px !important; }, on the td and on the th, but column still grows. I even tried directly in the td like "td width=32". I suspect this specifies a minimum width, not the maximum width? In the past i solved it by using 100% on 1 td and 32px on the other columns, but with bootstrap that doesn't make much sense.

Matt Lambert Over a year ago

try removing the grid class then a custom class with a fixed width

user3931708 Over a year ago

if you are using pure bootstrap icon then mix it with link This.

TinusSky Over a year ago

@MattLambert thanks for the idea, i gave it a shot but didn't work. But it gave me a idea, see my answer.

Collectives™ on Stack Overflow

Fixed width table columns in Bootstrap

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related