table设计模式

来源：互联网发布：软件开发成本控制编辑：程序博客网时间：2024/05/29 13:16

运用场景：

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!