HTML/CSS开发中table元素黑色边框不显示的问题排查与修复

你的table样式里的边框声明写法有误：border是CSS简写属性，必须同时指定边框宽度、边框样式、边框颜色三个值（至少要指定边框样式），你当前写的border: 15px black;缺少边框样式参数，浏览器默认边框样式为none，所以边框不会渲染。
你之前尝试修改的box-sizing属性、移除overflow-x:auto都和这个问题无关，也不需要额外给table加新class，直接修改现有CSS规则、或者用已有的id="menu"选择器写样式都能修复。

• 找到CSS中table选择器的样式块，把错误的border声明补全边框样式参数
• （可选优化）如果不需要表格默认的单元格与外框、单元格之间的空隙，可以添加border-collapse: collapse;属性
• （可选）如果担心通用table选择器会影响页面其他表格，直接用已有的#menuid选择器写边框样式即可，优先级更高不会被覆盖

修改后的table样式块参考：

table {
  margin-left: auto;
  margin-right: auto;
  padding: 40px;
  font-size: 1vw;
  background-color: white;
  /* 补全solid实线样式，修复边框不显示问题 */
  border: 15px solid black;
  box-sizing: border-box;
  /* 可选：需要消除边框间隙时取消注释下一行 */
  /* border-collapse: collapse; */
}

如果选择用id选择器单独给菜单表格加样式，追加以下代码即可：

#menu {
  border: 15px solid black;
}

修改后刷新页面即可看到15px宽度的黑色外边框正常显示，table标签上的内联overflow-x:auto;不会影响边框效果，不需要额外修改HTML结构。

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