Chrome和Firefox中不同的表格列宽答案

【问题标题】：Different table column width in Chrome and FirefoxChrome和Firefox中不同的表格列宽
【发布时间】：2011-12-09 11:20:59
【问题描述】：

<table class="schedule">
   <thead>
     <tr>
       <th id="first-column">#</th>
       <th>Monday</th>
       <th>Tuesday</th>
       <th>Wednesday</th>
       <th>Thursday</th>
       <th>Friday</th>
       <th>Saturday</th>
     </tr>
    </thead>
</table>

和

table.schedule { 
  table-layout: fixed;
  width: 900;
}

#first-column {
  width: 200px;
  padding: 0 10px;
}

因为第一列在 Firefox 中的宽度为 200+10+10=220px，但在 Chrome 和 Safari 中为 180+10+10=200px。我认为width 不应该包括padding，所以 Firefox 是对的吗？但无论如何，如何在不同浏览器之间设置相同的列宽？

编辑： Chrome 开发者工具如下所示：

【问题讨论】：

即使在 Chrome 中我也认为它是 200 像素！您使用的是什么版本的浏览器？我知道在用于“美化”的 chrome 中，默认情况下，它确实倾向于为一些组件（如 textarea 等）添加额外的填充。你已经明确地覆盖了它们。

标签： css html-table width padding

【解决方案1】：

确保您指定了现代文档类型，因为我没有看到我描述的行为。例如使用<!DOCTYPE html> 告诉浏览器它是HTML5。对我来说，第一列是 Firefox、Chrome 和 Safari 上的 200px + padding。

【讨论】：