Reputation: 7232
With a table already rendered, if I hide some row the width of the columns is dynamically recalculated per the contents:
function switchRow(ixRow){
let table = document.getElementById('theTable');
let row = table.rows[ixRow];
let currentVisibility = row.style.display;
row.style.display= currentVisibility== 'none' ? 'table-row' : 'none';
}
table{
border: 2px solid black;
padding: .5em;
}
<table id='theTable'>
<tr><td>Hellen</td><td>Smith</td></tr>
<tr><td>Montgomery</td><td>Wolfeschlegelsteinhausenbergerdorff</td></tr>
</table>
<br>
<button onclick="switchRow(1)">Switch row 1</button>
Is there a simple way to "freeze" the width of all the columns after the first rendering so hidding/displaying keeps the witdh of all the table / columns?
Edit to differentiate from the other question supposedly duplicated What I am looking for is to keep the widths that have been calculated when the table has been rendered -whatever the rules explicit or implicit-. Once displayed the widths must be constant. I do not want to add any width prior rules, I want the default rendering of the table but once rendered I look for no dynamic changes in widths.
Upvotes: 0
Views: 360
Reputation: 3725
I would first compute the maximum cell widths after the page load and assign it to the cells, in order to be kept for later:
window.onload = function () {
const table = document.getElementById('theTable');
const widths = computeColumnWidths(table)
setColumnWidths(table, widths)
}
function computeColumnWidths(table) {
const widths = Array.from({ length: table.rows[0].cells.length })
.fill(0);
for (let i = 0; i < table.rows.length; i++ ) {
const row = table.rows[i]
for (let j = 0; j < row.cells.length; j++) {
const cell = row.cells[j]
widths[j] = Math.max(widths[j], cell.offsetWidth);
}
}
return widths;
}
function setColumnWidths(table, widths) {
for (let i = 0; i < table.rows.length; i++ ) {
const row = table.rows[i]
for (let j = 0; j < row.cells.length; j++) {
const cell = row.cells[j]
cell.style.width = widths[j] + 'px';
}
}
}
function switchRow(ixRow){
let table = document.getElementById('theTable');
let row = table.rows[ixRow];
let currentVisibility = row.style.display;
row.style.display = currentVisibility == 'none' ? 'table-row' : 'none';
}
table{
border: 2px solid black;
padding: .5em;
}
<table id='theTable'>
<tr><td>Hellen</td><td>Smith</td></tr>
<tr><td>Montgomery</td><td>Wolfeschlegelsteinhausenbergerdorff</td></tr>
</table>
<br>
<button onclick="switchRow(1)">Switch row 1</button>
Upvotes: 1