• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    推荐一篇利用th,colgroup,col定义表格样式
    定义表格各列的样式，不用每个td都在那里加一堆的Class，利用th,colgroup,col等属性，轻松搞定^_^
    代码如下：
    复制代码 代码如下:

    style>
    table.Demo {
      border-collapse: collapse;
      color: #454545;
      font: 11px/150% Verdana, Arial, Helvetica, sans-serif;
    }
    table.Demo th {
      padding: 3px 7px;
      border: 1px solid #f60;
      border-width: 2px 1px 1px;
      background: #ffffe1;
    }
    table.Demo td {
      padding: 3px 7px;
      border: 1px solid #f60;
    }
    table.Demo col.Col1 {
      text-align: right;
      background: #f5f5f5;
    }
    table.Demo col.Col2 {
      color: #00c;
    }
    table.Demo col.Col3 {
      font-style: italic;
    }
    /style>
    table class="Demo">
      tr>
        th>TagName/th>
        th>ClassName/th>
        th>CSS/th>
      /tr>
      colgroup>
        col class="Col1" />
        col class="Col2" />
        col class="Col3" />
      /colgroup>
      tr>
        td>table/td>
        td>Demo/td>
        td>border-collapse: collapse;br />color: #454545;br />font: 11px/150% Verdana, Arial, Helvetica, sans-serif;/td>
      /tr>
      tr>
        td>th/td>
        td>/td>
        td>padding: 3px 7px;br />border: 1px solid #f60;br />border-width: 2px 1px 1px;br />background: #ffffe1;/td> 
      /tr>
      tr>
        td>td/td>
        td>/td>
        td>padding: 3px 7px;br />border: 1px solid #f60;/td>
      /tr>
      tr>
        td>col/td>
        td>Col1/td>
        td>text-align: right;br />background: #f5f5f5;/td>
      /tr>
      tr>
        td>col/td>
        td>Col2/td>
        td>color: #00c;/td>
      /tr>
      tr>
        td>col/td>
        td>Col3/td>
        td>font-style: italic;/td>
      /tr>
    /table>

    抛砖引玉，更多效果就由你DIY了！

    [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

    您可能感兴趣的文章:
    • 一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
    • srcElement表格样式
    • repeater、gridview 在绑定时判断判断显示不同的行样式或文本
    • js奇偶数判断的代码
    • jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
    上一篇：你不一定知道的Label的For用法
    下一篇：都是IE惹的祸多浏览器兼容问题
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    推荐一篇利用th,colgroup,col定义表格样式 推荐,一篇,利用,colgroup,