Disable columns autocalc width & Resiziable + Fixed table height

[blacksheriff]

Thanx for greate component. I've to quastions:

1. How I can disable auto column width recalc? I've set fixed column width 43px for expamle style in browser showing right "width, but computed width after load data is 59, or 65 or anything else...

2. Is it possible to work with resizable columns when height of table is set to fixed value?

[wenzhixin]

1. You can use the class column option to solve your problem: https://live.bootstrap-table.com/code/wenzhixin/1830

2. Not support: https://bootstrap-table.com/docs/extensions/resizable/#known-issues

[blacksheriff]

1. You can use the class column option to solve your problem: https://live.bootstrap-table.com/code/wenzhixin/1830
2. Not support: https://bootstrap-table.com/docs/extensions/resizable/#known-issues
3. Thanx a lot for reply. It's very difficult to make it vith class names, because a have a hundred of tables with hundred of columns. It'l be nice to have a disableRecalc flag in table options if it possible. I have a fixed width in my every column may be i can write smth in inline style?

[blacksheriff]

1. You can use the class column option to solve your problem: https://live.bootstrap-table.com/code/wenzhixin/1830 Unfortunatelly it doesn't help. It recalcs th and td automatically:

[blacksheriff]

If I not mistaken, it can be simple solve with change "width" to "min-width" for bootstrap4 respect that. in line 4199 bootstrap-table.js: style += Utils.sprintf('width: %s; ', (column.checkbox || column.radio) && !width ? !column.showSelectTitle ? '36px' : undefined : width ? width + unitWidth : undefined); Referenced to https://stackoverflow.com/a/23509701:

[wenzhixin]

I think we can overwrite the CSS style for this problem. For example:

td.bs-checkbox {
  width: 36px !important;
  min-width: 36px;
}

[blacksheriff]

I think we can overwrite the CSS style for this problem. For example:

td.bs-checkbox {
  width: 36px !important;
  min-width: 36px;
}

It should be set for every column for take effect. if column count over 50 it'l be large css file

[wenzhixin]

You can try to set table layout: https://live.bootstrap-table.com/code/wenzhixin/1861

[blacksheriff]

You can try to set table layout: https://live.bootstrap-table.com/code/wenzhixin/1861

It works with "width: auto !important" in .table class Without it, ,<th> looks fine, but <td> of 50 columns, trying to fit screen border respecting "width 100%" from bootstrap table class css. and if the other table has no 50 columns, but only 3 it doesn't looks good. Changing "width" to "min-width" is prefer, i think

[blacksheriff]

I've saved my example to show you about "table-layout: fixed; ": https://live.bootstrap-table.com/code/blacksheriff/1865

[blacksheriff]

So what about min-width?

[blacksheriff]

?

[UtechtDustin]

@djhvscf i guess your more familiar with css :)

[blacksheriff]

@djhvscf i guess your more familiar with css :)

My css knowledges is not critical here. Once again, I have many dynamic tables in which from 3 to 50 fields of a given width. Auto-recalculation randomly changes this width, which is not bad, but bootstrap spoils everything - changing width randomly to fit screen, respecting "width 100%". How can I turn off auto-recalculation of columns width, or change the column style in line 4199 of bootstrap-table.js "width" to "min-width". That would help too.

[UtechtDustin]

@blacksheriff i dont mean your css knowledges :)

[wenzhixin]

Have you solved your problem?

[blacksheriff]

No, I'm still waiting for )

[thetphoongon]

td { min-width: 200px !important; }
is ok for me. It is auto td width problem. Thanks

[mak1A4]

I solved the issue with javascript give th a class <th class="th-min-width"></th> and then do

document.querySelectorAll(".th-min-width").forEach(function (el) {
  el.style.minWidth = el.style.width;
});