美化html表格内容,css Javascript html表格美化
除了th表格 其他行在鼠标有焦点时会改变当前颜色
表格样式
body{
margin: 6px;
padding: 0;
font-size: 12px;
font-family: tahoma, arial;
background: #fff;
}
table{
width: 100%;
}
tr.odd{
background: #fff;
}
tr.even{
background: #eee;
}
div.datagrid_div{
width: 100%;
border: 1px solid #999;
}
/*****************样式1*******************/
table.datagrid1{
border-collapse: collapse;
border-bottom: 1px solid #666;
}
table.datagrid1 th{
color: #333;
padding: 3px;
font-family: monospace;
background: #9cf;
text-align: left;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
table.datagrid1 td{
padding: 3px;
border-top: 1px solid #ccc;
}
/*****************样式2*******************/
table.datagrid2{
border-collapse: collapse;
}
table.datagrid2 th{
text-align: left;
background: #9cf;
padding: 3px;
border: 1px #333 solid;
}
table.datagrid2 td{
padding: 3px;
border: none;
border:1px #333 solid;
}
/*****************样式3*******************/
table.datagrid3{
border-collapse: separate;
}
table.datagrid3 th{
text-align: left;
background: #ddd;
padding: 3px;
border: 0px solid #fff;
}
table.datagrid3 td{
padding: 3px;
border: 0px solid #fff;
}
/*****************样式4*******************/
table.datagrid4{
border-collapse: collapse;
}
table.datagrid4 th{
text-align: left;
background: #ddd;
padding: 3px;
border: none;
}
table.datagrid4 td{
padding: 3px;
border: none;
border-top: 1px solid #fff;
}
tr:hover,
tr.hover{
background: #9cf;
}
function add_event(tr){
tr.onmouseover = function(){
tr.className += ' hover';
};
tr.onmouseout = function(){
tr.className = tr.className.replace(' hover', '');
};
}
function stripe(table) {
var trs = table.getElementsByTagName("tr");
for(var i=1; i
var tr = trs[i];
tr.className = i%2 != 0? 'odd' : 'even';
add_event(tr);
}
}
window.onload = function(){
var tables = document.getElementsByTagName('table');
for(var i=0; i
var table = tables[i];
if(table.className == 'datagrid1' || table.className == 'datagrid2'
|| table.className == 'datagrid3' || table.className == 'datagrid4'){
stripe(tables[i]);
}
}
}
样式1
合约 | 最新价 | 涨跌 |
---|---|---|
纽期所原油 | 54.39 | -0.56 |
纽约期金 | 738.5 | 5.8 |
CBOT大豆 | 905.25 | 3.25 |
样式2
合约 | 最新价 | 涨跌 |
---|---|---|
CBOT大豆 | 905.25 | 3.25 |
ideawu.net | 381.25 | 1.25 |
CBOT小麦 | 548.5 | -1 |
样式3
合约 | 最新价 | 涨跌 |
---|---|---|
CBOT大豆 | 905.25 | 3.25 |
ideawu.net | 381.25 | 1.25 |
CBOT小麦 | 548.5 | -1 |
样式4
合约 | 最新价 | 涨跌 |
---|---|---|
CBOT大豆 | 905.25 | 3.25 |
ideawu.net | 381.25 | 1.25 |
CBOT小麦 | 548.5 | -1 |
美化html表格内容,css Javascript html表格美化相关推荐
- HTML5+CSS期末大作业:明星主页网站设计—— 鹿晗明星(7页)带留言带音乐表格 HTML+CSS+JavaScript 学生dreamweaver网页设计作业成品
HTML5期末大作业:明星主页网站设计-- 鹿晗明星(7页)带留言带音乐表格 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生 ...
- html表格内容动态显示,动态显示HTML表格内容
有一个问题,我无法弄清楚在这段代码中. 它应该迭代数组对象并将它们显示在HTML表格中.第三行应该包含按钮.为什么它不显示任何东西?动态显示HTML表格内容 HTML代码: Name Level Ac ...
- 【java基础知识】设置表格内容居中显示,表格字体大小调整,表格列宽调整
一.表格内容居中显示 通过Netbeans创建表格后,默认表头和表格内容全部偏左显示,想要手动修改,需要先将自动创建的表格类改为public类型. 然后在表格代码部分后面添加下面代码: 1.表头居中显 ...
- css里怎么设置表格描述,css如何设置表格样式 | 睿客网
摘要 CSS表格与表单是网页上最常见的元素,表格除了显示数据外,还常常被用来排版.CSS表格作为传统的HTML元素,一直受到网页设计者们的青睐.使用CSS表格来表示数据.制作调查表等在网络中屡见不鲜. ...
- css表格省略号,CSS 文本和表格中文字溢出显示省略号
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 * ...
- latex表格内容上下居中_LaTeX表格紧跟文字 (不影响下方文本对齐)
Latex 表格内文字过长自动换行 法一: [plain] view plaincopy \begin{tabular}{m{5cm}} 法二: [plain] view plaincopy \beg ...
- latex表格内容上下居中_LaTex表格内单元格内容换行
如何同时让表格同一行一个单元格的文字能垂直居中?比如说文字超长超出页面范围需要分行显示. ~~~ newcommand{tabincell}[2]{begin{tabular}{@{}#1@{}}#2 ...
- 表格应用css样式,对表格与表单应用CSS样式.ppt
<对表格与表单应用CSS样式.ppt>由会员分享,可在线阅读,更多相关<对表格与表单应用CSS样式.ppt(12页珍藏版)>请在人人文库网上搜索. 1.第十章,HTML与CSS ...
- css表格中怎么设置表格间距,css如何设置表格间距
css设置表格间距的方法:1.使用padding属性对table的td元素进行样式设置,语法"td{padding:数值}":2.直接在table标签内使用cellpadding属 ...
最新文章
- 博客会暂时停止一段时间
- ASP.NET中级学习2
- 网管必须了解的理光复印机相关故障现相之一
- jquery学习记录
- C#快速找出磁盘内的所有文件
- 零基础学python知乎-对于几乎是零基础的人,直接学 Python 编程合适吗?
- 英国通讯服务商与采购“不公平待遇”的较量
- 高可用Kubernetes集群原理介绍
- POJ3076 Sudoku 舞蹈链 DLX
- docker安装windows镜像,实战案例
- USB转串口那些事儿—串口驱动类型
- OneNote笔记备份
- 三相 AC-DC 变换电路(B 题)-- 2021 年全国大学生电子设计竞赛
- SELinux用audio2allow生成添加权限的格式及neverallow解决方法
- 韩剧Search[1992-2005]
- 凯撒加密,已知偏移量和未知偏移量解密
- 台式计算机为什么数字输入不了,电脑数字键盘打不出数字怎么回事
- 64位开源处理器Rocket的源代码简单介绍
- 智能客服机器人+在线客服,让你的服务不间断
- SAP-FI 科目的统驭科目类型设置错了如何更改
热门文章
- 如何将C 项目部署到云服务器上,如何将C 应用程序放在云服务器上
- oracle餐厅网络点餐系统_点餐系统产品演示
- 艾美捷双链RNA定量试剂盒试验方案
- 电脑开机显示“Windows\system\vgaoem.fon”丢失的解决方法
- 【Python】Python基本概念、print()输出函数、标准数据类型、type()函数与isinstance()函数、数据类型转换、变量与变量名的命名规则、注释
- java查询日期类的表,JAVA菜鸟入门篇 - 时间处理相关类实例:打印该月日期表 (29)...
- 云队友丨传道士与雇佣兵:“电商之王”杰夫·贝佐斯传奇
- 神经网络与深度学习(一)——机器学习基础
- JAVA基础加强篇09——IO流
- 快速接入百度地图定位、描点