主页 > 知识库 > 推荐一篇利用th,colgroup,col定义表格样式

推荐一篇利用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实现表格奇数偶数行不同样式(有图为证及实现代码)

标签:乐山 沈阳 沧州 红河 河南 上海 新疆 长治

巨人网络通讯声明:本文标题《推荐一篇利用th,colgroup,col定义表格样式》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266