jsmi吧 关注:1贴子:11
  • 1回复贴,共1

Css 代码片段

只看楼主收藏回复

欢迎各位吧友,亮出你的Css片段,只要你认为好的,就贴上来吧!大家一起来分享众人拾柴火焰高的成果。
由于贴吧不支持 语言代码,为了让吧友一目了然、以及页面内容清楚,美观。请大家一定将代码压缩,排版。
贴码规则:
A:先说明样式用途
B:贴出样式代码
C:贴出测试HTML


IP属地:四川1楼2013-11-14 09:45回复
    我来做个测试。
    Css用途:table 文字溢出
    Css:
    <style type="text/css">
    table {width:100%;table-layout:fixed;}
    .col1 {width:10%;}
    .col2 {width:20%;}
    .col3 {width:5%;}
    th strong {display:block;width:100%;}
    tr strong,tr td {white-space:nowrap;overflow:hidden;}
    </style>
    样式测试:
    <table border="1" cellspacing="0" summary="测试">
    <thead><tr>
    <th class="col1"><strong>产品名称</strong></th>
    <th class="col2"><strong>产品介绍</strong></th>
    <th class="col3"><strong>产品备注</strong></th>
    <th class="col3"><strong>产品备注</strong></th>
    <th class="col3"><strong>产品备注</strong></th>
    <th class="col3"><strong>产品备注</strong></th>
    <th class="col3"><strong>产品备注</strong></th>
    <th class="col3"><strong>产品备注</strong></th>
    <th class="col1"><strong>产品名称</strong></th>
    <th class="col2"><strong>产品介绍</strong></th>
    <th class="col3"><strong>产品备注</strong></th>
    <th class="col3"><strong>产品备注</strong></th>
    <th class="col3"><strong>产品备注</strong></th>
    <th class="col3"><strong>产品备注</strong></th>
    <th class="col3"><strong>产品备注</strong></th>
    <th class="col3"><strong>产品备注</strong></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>神舟 优雅Q400N</td>
    <td>优雅Q400N,2007年7月上市,采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
    <td>迅驰4平台,突出的性价比,漂亮的外观</td>
    <td>迅驰4平台,突出的性价比,漂亮的外观</td>
    <td>迅驰4平台,突出的性价比,漂亮的外观</td>
    <td>迅驰4平台,突出的性价比,漂亮的外观</td>
    <td>迅驰4平台,突出的性价比,漂亮的外观</td>
    <td>迅驰4平台,突出的性价比,漂亮的外观</td>
    <td>神舟 优雅Q400N</td>
    <td>优雅Q400N,2007年7月上市,采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
    <td>迅驰4平台,突出的性价比,漂亮的外观</td>
    <td>迅驰4平台,突出的性价比,漂亮的外观</td>
    <td>迅驰4平台,突出的性价比,漂亮的外观</td>
    <td>迅驰4平台,突出的性价比,漂亮的外观</td>
    <td>迅驰4平台,突出的性价比,漂亮的外观</td>
    <td>迅驰4平台,突出的性价比,漂亮的外观</td>
    </tr>
    </tbody>
    </table>


    IP属地:四川2楼2013-11-14 09:48
    回复