Если мы нажмем на кнопку, div будет расширяться от col-md-8 до col-md-12. Внутри этого div у нас есть table.table.table-responseive, управляемый Bootstrap.
Размер таблицы / tds слияния не изменят сами по себе sh при изменении размера окна (refre sh необходимо).
Кажется, это известная проблема , однако, у меня ничего не работает.
Когда div расширяется: он расширяется в порядке, но если я может заставить таблицу также расширяться, содержимое внутри не будет. У вас есть какие-нибудь идеи?
Пример того, что я кодировал , доступно в jsfiddle .
Я очень ценю вашу помощь, спасибо!
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">
<div id="table-wrapper">
<table id="table" class="table table-responsive table-bordered">
<thead id="table-thead">
<th>Blanai</th>
<th>Blanai</th>
<th>Blanai</th>
<th>Blanai</th>
<th>Blanai</th>
<th>Blanai</th>
<th>Blanai</th>
<th>Blanai</th>
<th>Blanai</th>
<th>Blanai</th>
</thead>
<tbody id="table-tbody">
<td>Pounrn</td>
<td>Pounrn</td>
<td>Pounrn</td>
<td>Pounrn</td>
<td>Pounrn</td>
<td>Pounrn</td>
<td>Pounrn</td>
<td>Pounrn</td>
<td>Pounrn</td>
<td>Pounrn</td>
</tbody>
</table>
</div>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
const resetTableView = () => {
const tableWrapper = document.getElementById('table-wrapper');
const thead = document.getElementById('table-thead');
const tbody = document.getElementById('table-tbody');
const wrapperWidth = tableWrapper.style.width;
$(table).bootstrapTable('resetView');
table.style.width = wrapperWidth;
thead.style.width = wrapperWidth;
tbody.style.width = wrapperWidth;
console.log('table view reset ok');
};
aSpecialBtn.addEventListener("click", (() => {
const wrapper = document.getElementById('table-wrapper-wrapper');
const wrapperIsReduced = doesWrapperIsReduced(wrapper);
if (wrapperIsReduced) {
expandWrapper(wrapper); // calls resetTableView();
} else {
reduceWrapper(wrapper); // calls resetTableView();
}
return resetTableView();
}));
document.addEventListener("keypress", e => {
if (e.key == 'Enter') {
resetTableView();
}
});