table设计模式

运用场景:

 

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!

 

 

 

 

你可能感兴趣的:(web 前端)