Skeleton框架下表格切换显示后无法占满12列问题如何解决？

问题成因 #

问题出在显隐逻辑错误修改了表格的默认展示属性：
Skeleton栅格系统给.columns类设置了对应比例的宽度，表格元素默认的display: table属性会让它占满分配的11列宽度，所以首次加载时显示正常。
你在显示表格的时候手动把display改成了inline-block，而inline-block元素默认是内容自适应宽度，不会主动撑满父容器的分配宽度，所以重新显示后表格只会撑开至刚好容纳内容的宽度，剩下的区域就变成空白了。

修复方案 #

把显隐逻辑里显示时的display值改成表格默认的table即可，也可以直接清空行内的display属性，让元素自动继承CSS里定义的展示规则。
修改后的代码示例：

function show() {
  const table = document.getElementById('displaytable2')
  if (table.style.display === 'none') {
    // 以下两种写法二选一即可
    table.style.display = 'table' // 明确指定table的默认展示属性
    // table.style.display = '' // 清空行内样式，自动继承类样式规则
  } else {
    table.style.display = 'none'
  }
}

内容的提问来源于stack exchange，提问作者kitchen800