设置表格宽度优先选择HTML属性还是CSS类？

结论 #

如果你的核心诉求是CSS未加载时站点仍具备基础可访问性，直接在HTML中使用<table width=500>的方案更合理。

两种方案的差异对比 #

• 原生HTML width属性是<table>标签的内置属性，不依赖任何CSS文件加载即可生效，即便CSS请求失败、被拦截或者用户手动禁用CSS，表格依然会保持500px的固定宽度，基础布局、内容可读性不会受损，完全符合你提到的无CSS场景访问要求。
• 基于CSS类的方案完全依赖样式文件加载，一旦CSS不可用，my-table的宽度规则就会完全失效，表格会回退到默认的「内容自适应宽度」渲染，很容易出现内容溢出、布局错乱的问题，无法满足无CSS场景的可用性要求。

兼顾规范和降级兼容的优化方案 #

如果你同时需要符合现代Web「结构与样式分离」的开发规范，可以两种写法同时使用：

<table width="500" class="my-table">

.my-table {
  width: 500px;
  min-width: 500px;
}

这种写法下，CSS正常加载时优先级高于原生属性，会按照CSS规则渲染；CSS加载失败时自动降级到原生width属性的宽度设置，兼顾了规范和降级可用性。

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