表格布局与样式在不同浏览器中的表现差异及解决方法-优快云博客

运用场景：

HTML：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div { width:300px; }
        table { table-layout:fixed; width:100%; height:50px; }
        td.col1 { width:20px; background-color:blue; }
        td.col2 { width:40px; background-color:red; }
        td.col3 { width:60px; background-color:yellow; }
        td.col3 { width:auto; background-color:yellow; } 

        td { padding:5px; }
		
    </style>
</head>
<body>
    <div>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
                <td class="col3"></td>
                <td class="col4"></td>
            </tr>
        </table>
    </div>
	<table>
<tr><td></td><td></td></tr>
</table>
</body>
</html>

chrome 效果

col1: 5px-10px-5px | col2: 5px-30px-5px ...

td中的width内含了padding的定义

IE & FF 效果

col1: 5px-20px-5px | col2: 5px-40px-5px ...

td中的width 与 padding不相干

问题描述：

写道

when applying table-layout:fixed to a table and using padding on the cells. IE and Firefox seem to work correctly by adding the cell width and the padding together. Chrome and Safari only use the cell width

解决方式：

<table style="table-layout: fixed;">
 <tr>
  <td style="width: 100px;">
   <div style="padding: 10px;">
    lorem, ipsum.
   </div>
  </td>
 </tr>
</table>

即：不给td定义padding , 而是在内容外又新增一个wrapper（容器），在wrapper中定义padding!