Menu
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:
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.
991
Add . w-auto class to the table element to set an auto width to the table column. The width of the columns will automatically adjust to the content of the column. That means it will always take a minimum width required to present its content.
Table column width use the same layout as grids do; using col-[viewport]-[size] . Remember the column sizes should total 12; 1 + 3 + 3 + 5 = 12 in this example. Remember to set the <th> elements rather than the <td> elements so it sets the whole column.
Select your table. On the Layout tab, in the Cell Size group, click AutoFit. Click Fixed Column Width.
By using CSS, the styling of HTML elements is easy to modify. To fix the width of td tag the nth-child CSS is used to set the property of specific columns(determined by the value of n) in each row of the table.
.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"> </th>
<th class="tdicon"> </th>
But this works:
<th class="col-md-6"></th>
<th class="col-md-2"></th>
<th></th>
<th class="tdicon"> </th>
<th class="tdicon"> </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...
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With