首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 软件管理 > 软件开发 >

table设计方式

2012-09-18 
table设计模式运用场景:?HTML:?!DOCTYPE htmlhtmlheadstyle typetext/cssdiv { width:300px }

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!

?

?

?

?

热点排行