不同的表列宽

<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宽度，但180 + 10 + 10 =在Chrome和Safari 200像素。我认为width不应该包括padding，所以Firefox是正确的？但无论如何，我如何在浏览器上设置相同的列宽？

编辑：的Chrome开发者工具的样子： enter image description here

来源

2011-10-17 Lai Yu-Hsuan

即使在Chrome中，我也会将其视为200px！你使用的是什么版本的浏览器？我知道，在“美化”的Chrome中，默认情况下，它倾向于为textarea等某些组件添加额外的填充。你已经明确地覆盖了它们。 – PhD

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

来源

2011-10-17 17:59:36 inkredibl

不同的表列宽

回答

相关问题