Setting column width in responsive table

Bootstrap Studio Help
1

I have a table that will hide specific columns depending on screen size. I know how to set that up in Bootstrap Studio. What I cannot seem to figure out is how to set column width for different view port sizes. Can someone point me in the right direction?

2

You would need to use media queries for things where you need to make adjustments to elements based on screen size.

As an example below

For extra small devices (Phones)

@media (max-width:767px) {
    td {
        width: 25px;
    }
}

For small devices (Tablets)

@media (min-width:768px) {
    td {
        width: 50px;
    }
}

For medium devices (laptop)

@media (min-width:992px) {
    td {
        width: 75px;
    }
}

For large devices (Desktop)

@media (min-width:1200px) {
    td {
        width: 100px;
    }
}

Those media queries are the primary ones Bootstrap uses, there are others but this at least gets you started on understand what to do.

Since this is mobile first development, if you first start out setting the TD width to the smallest size you want then you don't need the first media query because it's already assumed. You'd use the other ones though to override that default based on the desired screen size adjustments you want to make.

You should be able to get a better understanding by reading the following https://getbootstrap.com/docs/3.3/css/#grid-media-queries

Hope that helps :)

Saj

3

That helps a lot actually! I appreciate the explanation and examples. It makes sense making things look correct in the smallest possible view port. I am used to pure UI design in Photoshop/Pixelmator. Design big because we can always make it smaller not the other way around. Mobile first is the opposite. Build it small because we can always make it bigger. :)

Thanks again.

4

Another thing that helps with this is to use percentages instead of px for the widths. This allows them to resize a little easier and better than specific px settings do.