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 name="code"><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!
?
?
?
?