设计一个Table 样式 ，自己写的样式在下面。

最新推荐文章于 2023-06-04 18:17:49 发布
最新推荐文章于 2023-06-04 18:17:49 发布
阅读量121 收藏
点赞数
原文链接：http://www.cnblogs.com/liulf/archive/2010/07/08/1773597.html
版权

body { margin: 0 5px 0 0; font-size: 13px; font-family:宋体 ,微软雅黑 ; }
table, tr, td { font-size: 13px; }
body,ul,li,dl,dd,p,h1,h2,h3,h4,h5,h6,form,fieldset{margin:0;padding:0;}
A { color: #004f99; text-decoration: none; }
A:hover { text-decoration: underline; }
.Title { font-weight: bold; font-size: 16px; border: #2694e8 1px solid; margin: 5px 0 0 5px;
         padding-left: 3px; padding-right: 3px; padding-bottom: 3px; padding-top: 5px;
          width: 954px; height: 23px; background: url(/images/titlebg.png) #99c2ff repeat-x 50% 50%; }

 

.Main { width: 960px; height: 716px;
margin: 0 0 0 5px; border-left: #2694e8 1px solid; border-bottom: #2694e8 1px solid; border-right: #2694e8 1px solid;
 text-align:center;}
.Main .addtable{background:#2694E8}
.Main .addtable tr{background:#fff}

.TableDouble { border-left-color: #d1ddf1; border-bottom-color: #d1ddf1; width: 800px; border-top-style: double; border-top-color: #d1ddf1; border-right-style: double; border-left-style: double; border-right-color: #d1ddf1; border-bottom-style: double; }
.Search { padding: 5px; background-color: #d1ddf1; }

.ShowList { width: 945px; height: 80%; padding-right: 15px; overflow-y: scroll; overflow-x: hidden; scrollbar-arrow-color: #29427c; scrollbar-face-color: #e0e2ee; crollbar-darkshadow-color: #b5c4e7; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #d1daf0; scrollbar-track-color: #f0f0f0; scrollbar-3dlight-color: #b2c1e6; }
.ButtonList { padding: 5px; background-color: #d1ddf1; border-top: #2694e8 1px solid; }
.MainTable { width: 98%; }
.FiledTd { width: 100px;text-align:right; }
.out { border: #507CD1 1px solid; padding: 1px 0; }
.on { border: #fdc87d 1px solid; padding: 1px 0; }

/* button */

.btn { border-right: #7b9ebd 1px solid; padding-right: 2px; border-top: #7b9ebd 1px solid; padding-left: 2px; font-size: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); border-left: #7b9ebd 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #7b9ebd 1px solid; cursor: pointer; }
.btn1_mouseout { border-right: #7EBF4F 1px solid; padding-right: 2px; border-top: #7EBF4F 1px solid; padding-left: 2px; font-size: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); border-left: #7EBF4F 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #7EBF4F 1px solid; }
.btn1_mouseover { border-right: #7EBF4F 1px solid; padding-right: 2px; border-top: #7EBF4F 1px solid; padding-left: 2px; font-size: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); border-left: #7EBF4F 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #7EBF4F 1px solid; }
.btn2 { padding: 2 4 0 4; font-size: 12px; height: 23; background-color: #ece9d8; border-width: 1; }
.btn3_mouseout { border-right: #2C59AA 1px solid; padding-right: 2px; border-top: #2C59AA 1px solid; padding-left: 2px; font-size: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); border-left: #2C59AA 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #2C59AA 1px solid; }
.btn3_mouseover { border-right: #2C59AA 1px solid; padding-right: 2px; border-top: #2C59AA 1px solid; padding-left: 2px; font-size: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); border-left: #2C59AA 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #2C59AA 1px solid; }
.btn3_mousedown { border-right: #FFE400 1px solid; padding-right: 2px; border-top: #FFE400 1px solid; padding-left: 2px; font-size: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); border-left: #FFE400 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #FFE400 1px solid; }
.btn3_mouseup { border-right: #2C59AA 1px solid; padding-right: 2px; border-top: #2C59AA 1px solid; padding-left: 2px; font-size: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); border-left: #2C59AA 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #2C59AA 1px solid; }
.btn_2k3 { border-right: #002D96 1px solid; padding-right: 2px; border-top: #002D96 1px solid; padding-left: 2px; font-size: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); border-left: #002D96 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #002D96 1px solid; }

input.button { border-right: #7b9ebd 1px solid; padding-right: 2px; border-top: #7b9ebd 1px solid; padding-left: 2px; font-size: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); border-left: #7b9ebd 1px solid; cursor: hand; color: black; padding-top: 2px; border-bottom: #7b9ebd 1px solid; }

.edit_button, .del_button, .add_button, .detail_button { width: 16px; height: 16px; cursor: pointer; border: 0; }

.edit_button { background: url(/images/opEdit.gif); }
.del_button { background: url(/images/opDel.gif); }
.add_button { background: url(/images/add.png); }
.detail_button { background: url(/images/application_form_detail.png); }

/* gridview*/
.OverRow { background-color: #A1ADF1; text-align: center; }
.SelectedRow { background-color: #D1DDF1; color: #333333; font-weight: bold; text-align: center; }
.Row { background-color: #EFF3FB; text-align: center; }
.AlternatingRow { background-color: White; text-align: center; }
.HeaderRow { background-color: #507CD1; color: White; font-weight: bold; text-align: center; }
.HeaderRow a { color: #fff; }
.PagerRow { background-color: White; height: 26px; }
.PagerRow a { color: #000; text-decoration: none; background: #fff; border: solid 1px #fff; }
.PagerRow a:hover { color: #fff; text-decoration: none; background: #88e; border: solid 1px #66f; }
.PagerRow span { color: #fff; background: #88e; border: solid 1px #66f; }

.RightMenu { border-right: 2px outset; border-top: 2px outset; border-left: 2px outset; border-bottom: 2px outset; background-color: buttonface; }
.RightMenu hr { width: 100px; }
.RightMenu ul { list-style: none; margin: 0; padding: 0; }
.RightMenu ul li { vertical-align: bottom; }
.RightMenu A { color: MenuText; text-decoration: none; display: block; width: 100px; text-align: center; line-height: 20px; }
.RightMenu A:link { color: MenuText; text-decoration: none; }
.RightMenu A:active { color: MenuText; text-decoration: none; }
.RightMenu A:visited { color: MenuText; text-decoration: none; }
.RightMenu A:hover { color: HighlightText; background-color: Highlight; }


.tgDefault { border-top: 1px solid #7c7c94; background-color: #ffffff; border-spacing: 0px; font-size: 12px; font-family: 宋体, 'Arial' , 'Verdana' , 'sans-serif' , 'Times New Roman'; }
.tgDefault img { border: 0px; padding: 0px; margin: 0px; display: inline-block; }
.tgDefault td { padding: 0px; margin: 0px; border-bottom: 1px solid #7c7c94; line-heigth: 20px; height: 20px; }

.TreeDiv { width: 440px; height: 420px; padding-right: 15px; overflow: auto; scrollbar-arrow-color: #29427c; scrollbar-face-color: #e0e2ee; crollbar-darkshadow-color: #b5c4e7; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #d1daf0; scrollbar-track-color: #f0f0f0; scrollbar-3dlight-color: #b2c1e6; }


/*command*/
    .messagetext {overflow:hidden; zoom:1; border-left:1px solid #000; border-right:1px solid #000; padding:0 10px;  text-align:left; background:#ffffe1; word-break : break-all; letter-break:break-all; }
    .messagetext img {float:left;margin:0 3px 3px 3px;}
    .infomessage {float:right;margin-top:-10px;margin-right:-4px;}
    *html .infomessage{margin-top:-15px;}
/*command*/

/*
author:liulf
*/
.divScrolling
{
    overflow:scroll;
    border:1px solid;
    height:200px;
}
/*
记帐凭证
*/
.acountDocument
{
 width:100%;
 height:80%;
 color:Green;
 font-size:15px;
}
.accountDocTitle
{
    word-spacing:20px;
    position:relative;
    text-align:center;       
     font-size:22px;
     font-weight:bold;
     top:10px;
      letter-spacing:10px;
}
.accDocDate
{
    position:relative;
    text-align:center;    
     top:20px;
       left:30px;
       letter-spacing:10px;
}
.accDocBh
{
    position:relative;
    text-align:center;    
     top:25px;
       left:200px;
}
.accDocContent
{
    position:relative;    
    text-align:center;
    top:30px;    
    left:50px;
    width:90%;
    height:60%;    
    background-color: green;
    border:.5px;
    border-bottom:.5px;
    border-right:.5px;
}
.accDocContent td
{
    background-color:#fff;
    font-size: 15px;
    letter-spacing:10px;
    border-style:none;
    border-width:.1px;
}
.accDocbot
{
    position:relative;
    text-align:center;
    top: 0px;
    left: 0px;
}
 
.accdocFj
{
    position:relative;
    left:920px;
    top:-240px;
    writing-mode: tb-rl;    
}
/*凭证相关信息*/
.accdocXgxx
{
      position:relative;
      border:1px;
      border-style:solid;
      left:50px;      
      border-color:Green;    
      width:870px;      
      height:110px;
      font-size:15px;
      top:13px;
}
.accdocXgxx td
{
    background-color:#fff;
    font-size: 15px;    
    border-style:none;
    border-width:.1px;
    border-color:Green;
}
.accDocHs
{
     position:relative;    
     left:-310px;
}
.accDocXuanXiang
{
    text-align:left;
    position:relative;
    float:none;
    top:10px;
    left: 0px;
}
/*编辑页面*/
.editTable
{
    position:relative;
    background-color:#00CCFF;
    border-bottom:.5px;
    border-right:.5px;
    border:#000000 1px solid;
    border-collapse:collapse;
    text-align:left;
}
.editTable td
{    
    font-size: 15px;
    background-color:#fff;     
    /*background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"white":"#EFF3FB"));    */
    border:#507CD1 1px solid;
    border-collapse:collapse;
}
 
.ChargeApply
{        
    color:Blue;
    background-color:#CCCCFF;
    background:#CCCCFF;
    font-weight:bold;    
    font-size:large;
    font-family:仿宋_GB2312;    
    
}
.ChargeApply td
{
    background:#CCCCFF;
}
/*退提错误提示信息*/
.tj_error
{
    font-weight:bold;    
    color:Red;
    font-size:large;
    font-family:仿宋_GB2312;
}

转载于:https://www.cnblogs.com/liulf/archive/2010/07/08/1773597.html

bill_live
关注
好看table样式 好看的CSS——Table样式表
04-01
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
分享一个首行表头和最左列和最右列固定中间滚动的html table样式
12-22
一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列...
table的样式设置
BabyQ12138的博客
11-10 509
table,th,td{ border-collapse:collapse; border:solid 1px black; }
简介的table样式
韩小转的博客
04-05 503
table{ table-layout:fixed; empty-cells:show; border-collapse: collapse; margin:0 auto; } td{ height:30px; text-align: center; } h1,h2,h3{ font-size:12px; margin:0; padding:0; } .table{ border:1px soli
Table样式
yuzheh521的博客
11-11 252
<style type="text/css"> table { border-collapse: collapse; margin: 0 auto; text-align: center; } table td, table th { border: 1px solid #cad9ea; colo.
好看的table-css样式
qq_45450789的博客
04-13 5973
1.单像素边框css表格 源代码： <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable t.
layui中table表头样式修改方法
10-18
在本文中，我们将深入探讨如何在layui框架中修改table组件的表头样式。layui是一款流行的前端UI框架，它提供了一套完整的模块化解决方案，包括表格（table）在内的各种组件，帮助开发者快速构建美观且功能丰富的网页...
vue修改Element的el-table样式的4种方法
01-18
修改Element中的el-table样式，可以使用以下几种方法： 　1. row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 　2. cell-style 单元格的 style 的回调方法，也可以使用一...
table样式.zip
06-09
"table样式.zip"这个压缩包就是为此目的提供的，它包含了一些预设的、美观的Table样式，帮助开发者快速创建出吸引眼球的前台Table。 在"tablecloth"这个文件中，我们可以找到一系列CSS样式和可能的HTML结构示例，...
Element-UI中关于table表格的那些骚操作
qq_43248623的博客
04-09 1510
最近的项目中使用到element-ui组件库，由于做的是后台管理系统，所以经常需要操作表格，编辑样式的过程中遇到一些问题，官网针对table给出了很多的api，自己可以自定义，基本能满足产品需求，但是没有给出具体的案例，网上的资料也比较简略，这里简单整理下一些常用的操作，如果有类似的功能可以做一个参考。 具体的使用方法还是建议仔细阅读官网-table章节： https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot..
html,table常用样式
11-30
html,table常用样式，适用于对htm样式美观有要求的项目
好看html表格table样式
qq_38730338的博客
08-01 1万+
<style type="text/css"> table{ border-collapse:collapse; table-layout:fixed; border-radius:5px; overflow:hidden; margin: 10px auto; border:2px solid #70aefb ; background-color:...
【界面设计学习笔记】table表格设计
IsQiya Bug Worlde
06-04 575
table表格设计
四个好看的table表格样式
热门推荐
下半夜的风
10-24 7万+
1. 单像素边框CSS表格 table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } ta
很好看的表格样式
weixin_33736832的博客
03-22 85
2019独角兽企业重金招聘Python工程师标准>>> ...
好看的表格样式
zhuixunhebe1的专栏
08-01 2079
https://www.cnblogs.com/zk-zhou/p/7427883.html
好看的table css样式
王永安的博客
04-20 7万+
漂亮的table表格样式css源码漂亮的table表格样式css源码&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; table { border-collapse: collapse; margin: 0 ...
几个好看的表格样式
weixin_34417635的博客
08-12 1435
/*第一种样式*/ table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; ...
css html 高仿word 格式，制作的可编辑的微软Word样式文档 HTML-Sheets-of-Paper
书写人生
04-07 5482
<!DOCTYPE html> <!-- * HTML-Sheets-of-Paper (https://github.com/delight-im/HTML-Sheets-of-Paper) * Copyright (c) delight.im (https://www.delight.im/) * Licensed under the MIT License (ht...
履带式拖拉机Creo2.0_三维3D设计图纸.zip
最新发布
10-15
履带式拖拉机Creo2.0_三维3D设计图纸.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值