Maybe more of a css question

Get Help
#1

Hi

I’m trying to implement show/hide details in a table by adding a row after the one the details belong to. This row contains only one table cell td with a colspan equal to the number of columns. However I can’t add a new row without the whole table be reflowed. I have used this in several projects by using b-table from bootstrap-vue and it can add a row without the other rows changing size (but now I have to use bootstrap 5 and vue 3). What should I do to prevent this from happening. Miminal code example included:

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8dGFibGUgc3R5bGU9XCJ3aWR0aDogMTAwJTtcIj5cbiAgICA8dGhlYWQ+XG4gICAgICA8dHI+XG4gICAgICAgIDx0aD5TaG93PC90aD5cbiAgICAgICAgPHRoPk5hbWU8L3RoPlxuICAgICAgICA8dGg+RS1tYWlsPC90aD5cbiAgICAgIDwvdHI+XG4gICAgPC90aGVhZD5cbiAgICA8dGJvZHk+XG4gICAgICA8dGVtcGxhdGUgdi1mb3I9XCIocm93KSBpbiByb3dzXCI+XG4gICAgICAgIDx0cj5cbiAgICAgICAgICA8dGQ+XG4gICAgICAgICAgICA8YnV0dG9uIEBjbGljaz1cInJvdy5kZXRhaWxzID0gIXJvdy5kZXRhaWxzXCI+U2hvdzwvYnV0dG9uPlxuICAgICAgICAgIDwvdGQ+XG4gICAgICAgICAgPHRkPnt7IHJvdy5uYW1lIH19PC90ZD5cbiAgICAgICAgICA8dGQ+e3sgcm93LmVtYWlsIH19PC90ZD5cbiAgICAgICAgPC90cj5cbiAgICAgICAgPHRyIHYtaWY9XCJyb3cuZGV0YWlsc1wiPlxuICAgICAgICAgIDx0ZCBjb2xzcGFuPVwiM1wiPnt7IHJvdy5ib2R5IH19PC90ZD5cbiAgICAgICAgPC90cj5cbiAgICAgIDwvdGVtcGxhdGU+XG4gICAgPC90Ym9keT5cbiAgPC90YWJsZT5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgc2V0dXA+XG4gIGltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuXHRjb25zdCByb3dzID0gcmVmKFtcbiAgICAgICAge1xuICAgICAgICAgIFwiaWRcIjogMSxcbiAgICAgICAgICBcIm5hbWVcIjogXCJpZCBsYWJvcmUgZXggZXQgcXVhbSBsYWJvcnVtXCIsXG4gICAgICAgICAgXCJlbWFpbFwiOiBcIkVsaXNlb0BnYXJkbmVyLmJpelwiLFxuICAgICAgICAgIFwiYm9keVwiOiBcImxhdWRhbnRpdW0gZW5pbSBxdWFzaSBlc3QgcXVpZGVtIG1hZ25hbSB2b2x1cHRhdGUgaXBzYW0gZW9zXFxudGVtcG9yYSBxdW8gbmVjZXNzaXRhdGlidXNcXG5kb2xvciBxdWFtIGF1dGVtIHF1YXNpXFxucmVpY2llbmRpcyBldCBuYW0gc2FwaWVudGUgYWNjdXNhbnRpdW1cIlxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgXCJpZFwiOiAyLFxuICAgICAgICAgIFwibmFtZVwiOiBcInF1byB2ZXJvIHJlaWNpZW5kaXMgdmVsaXQgc2ltaWxpcXVlIGVhcnVtXCIsXG4gICAgICAgICAgXCJlbWFpbFwiOiBcIkpheW5lX0t1aGljQHN5ZG5leS5jb21cIixcbiAgICAgICAgICBcImJvZHlcIjogXCJlc3QgbmF0dXMgZW5pbSBuaWhpbCBlc3QgZG9sb3JlIG9tbmlzIHZvbHVwdGF0ZW0gbnVtcXVhbVxcbmV0IG9tbmlzIG9jY2FlY2F0aSBxdW9kIHVsbGFtIGF0XFxudm9sdXB0YXRlbSBlcnJvciBleHBlZGl0YSBwYXJpYXR1clxcbm5paGlsIHNpbnQgbm9zdHJ1bSB2b2x1cHRhdGVtIHJlaWNpZW5kaXMgZXRcIlxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgXCJpZFwiOiAzLFxuICAgICAgICAgIFwibmFtZVwiOiBcIm9kaW8gYWRpcGlzY2kgcmVydW0gYXV0IGFuaW1pXCIsXG4gICAgICAgICAgXCJlbWFpbFwiOiBcIk5pa2l0YUBnYXJmaWVsZC5iaXpcIixcbiAgICAgICAgICBcImJvZHlcIjogXCJxdWlhIG1vbGVzdGlhZSByZXByZWhlbmRlcml0IHF1YXNpIGFzcGVybmF0dXJcXG5hdXQgZXhwZWRpdGEgb2NjYWVjYXRpIGFsaXF1YW0gZXZlbmlldCBsYXVkYW50aXVtXFxub21uaXMgcXVpYnVzZGFtIGRlbGVjdHVzIHNhZXBlIHF1aWEgYWNjdXNhbXVzIG1haW9yZXMgbmFtIGVzdFxcbmN1bSBldCBkdWNpbXVzIGV0IHZlcm8gdm9sdXB0YXRlcyBleGNlcHR1cmkgZGVsZW5pdGkgcmF0aW9uZVwiXG4gICAgICAgIH1cbiAgICAgIF0pXG48L3NjcmlwdD5cblxuPHN0eWxlPlxuICB0ZCB7XG4gICAgYm9yZGVyOiAxcHggc29saWQgcmVkO1xuICB9XG48L3N0eWxlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiXG4gIH1cbn0ifQ==

#2

In Chrome and Firefox will the cells change size but not in Safari