运用场景:
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!