2个table样式

最新推荐文章于 2021-08-10 16:49:18 发布
最新推荐文章于 2021-08-10 16:49:18 发布
阅读量1k 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lushuaiyin/article/details/8758990
版权

table.css

@charset "utf-8";
table{
	font-size:12px;
    table-layout:fixed;
    border-collapse: collapse;
    margin:0 auto;
}

td{
    height:25px;
}



/*第一套css*/
table.table1{
    border:1px solid #9db3c5;
    color:#633123;
	
}
table.table1 th {
    background-color:#B4CDCD;
    height:30px;
    color:#453a32;
	border:1px solid #a7d1fd;
    padding:0 2px 0;
}
table.table1 td{
    border:1px dotted #cad9ea;
	padding: 3px 0 0 0;
	text-align:center;
	height:25px;
}

table.table1 tr.interval{
    background-color:#e8f3fd;
}

/*第2套css*/
table.table2{
    border:1px solid #9db3c5;
    color:#CD0000;
}
table.table2 th {
    background-color:#EEE685;
    height:30px;
    color:#68228B;
	border:1px solid #a7d1fd;
    padding:0 2px 0;
}
table.table2 td{
    border:1px dotted #cad9ea;
	padding: 3px 0 0 0;
	text-align:center;
	height:25px;
}

table.table2 tr.interval{
    background-color:#e8f3fd;
}

应用页面： 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>两套表格样式</title>
<link rel="stylesheet" type="text/css" href="table.css" />
<style type="text/css">
body{
    font-size:12px;
}
</style>
<script type="text/javascript">

</script>
</head>

<body>

<table width="98%" class="table1">
  <tr>
    <th>课程</th>
    <th>资料查询</th>
    <th>作者</th>
  </tr>

  <tr class="interval">
    <td>css</td>
    <td>http://www.w3school.com.cn/css/index.asp</td>
    <td>索隆</td>
  </tr>
  <tr>
    <td>css</td>
    <td>http://www.w3school.com.cn/css/index.asp</td>
    <td>索隆</td>
  </tr>
  <tr class="interval">
    <td>css</td>
    <td>http://www.w3school.com.cn/css/index.asp</td>
    <td>索隆</td>
  </tr>
  <tr>
    <td>css</td>
    <td>http://www.w3school.com.cn/css/index.asp</td>
    <td>索隆</td>
  </tr>
  <tr class="interval">
    <td>css</td>
    <td>http://www.w3school.com.cn/css/index.asp</td>
    <td>索隆</td>
  </tr>
</table>

</body>
</html>

效果：








索隆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用java和Velocity创建html复杂的table
weixin_33826609的博客
10-14 811
2019独角兽企业重金招聘Python工程师标准>>> ...
velocity 生成表格动态排列,可以拷贝直接使用，内容分别为：java ，vm ，和生成的html
deAdmin的博客
08-08 1080
package com.xxxx.demo.xxxxxx.testvm; import com.fasterxml.jackson.databind.ObjectMapper; import com.xxxxx.demo.xxxx.VelocityBuilder; import org.apache.velocity.Template; import org.apache.velocity.V...
《Velocity 模板使用指南》中文版
WestpointSpace的专栏
10-28 752
声明: 转载请保留此页声明**************************************************************************此文档为蓝杰实训学员拓展实训之用.蓝杰实训不对译文中某些说法可能会对您的系统或开发造成损害负责.如对您有所帮助，我们不胜荣幸！**************************************
【转】Velocity用户手册---中文版(学习修改版)
weixin_33816821的博客
08-18 366
http://airport.javaeye.com/blog/23634Velocity的能力远不止web站点开发这个领域，例如，它可以从模板（template）产生SQL和PostScript、XML，它也可以被当 作一个独立工具来产生源代码和报告，或者作为其他系统的集成组件使用。Velocity也可以为Turbine web开发架构提供模板服务（template service）。Veloc...
velocity实现将Collection按table输出
永远的黑山
10-29 1323
   #set($column=4)   #set($flag=1)   #set($size=$allType.get($bigTypeInfo).size())   #set($offset=1)   #foreach($miniTypeInfo in $allType.get($bigTypeInfo))      #if($flag == 1)                       
table样式.zip
06-09
"table样式.zip"这个压缩包就是为此目的提供的，它包含了一些预设的、美观的Table样式，帮助开发者快速创建出吸引眼球的前台Table。 在"tablecloth"这个文件中，我们可以找到一系列CSS样式和可能的HTML结构示例，...
layui中table表头样式修改方法
10-18
在本文中，我们将深入探讨如何在layui框架中修改table组件的表头样式。layui是一款流行的前端UI框架，它提供了一套完整的模块化解决方案，包括表格（table）在内的各种组件，帮助开发者快速构建美观且功能丰富的网页...
javascript清理table样式
10-23
下面是具体的JavaScript代码实现，它演示了如何通过正则表达式来实现去除table中的多余样式： ```javascript function cleanTableStyles(htmlString) { // 正则表达式匹配所有的style属性并将其删除 return ...
经常使用的两个清爽的table样式
09-25
第二个表格样式则采用不同的设计风格，强调了标题的视觉效果和数据的可读性。以下是关键CSS规则的解释： 1. `.table` 类设定了表格的宽度、边距和边框，使其在页面中居中并对齐。 2. `th` 的样式包括字体加粗、大小...
Velocity User Guide 用户手册
山不在高，有金则名
04-17 9888
官方网址：http://velocity.apache.org/engine/devel/user-guide.html
Velocity语法介绍（模板引擎）
qq_32465815的博客
07-21 4565
什么是Velocity？ Velocity是一个基于Java的模板引擎。它允许任何人使用简单但功能强大的模板语言来引用Java代码中定义的对象。 当Velocity用于Web开发时，Web设计人员可以与Java程序员并行工作，根据模型 - 视图 - 控制器（MVC）模型开发Web站点，这意味着Web页面设计人员可以专注于创建看起来不错的站点，程序员可以专注于编写顶级代码。Velocity将Ja...
Velocity的中文指南（4）－整理
火鸟专栏
10-12 2017
1.       宏#macro 脚本元素允许模板设计者在VTL 模板中定义重复的段。 Velocimacros 不管是在复杂还是简单的场合都非常有用。下面这个Velocimacro，仅用来节省击键和减少排版错误，介绍了一些Velocity宏的概念。 #macro( d )#end 在例子中，Velocimacro定义为d，它可以象调用其他VTL指令一样的形
velocity模板引擎学习(1)
weixin_33772645的博客
12-05 1014
velocity与freemaker、jstl并称为java web开发三大标签技术，而且velocity在codeplex上还有.net的移植版本NVelocity，(注：castle团队在github上也维护了一个版本)对于使用异构技术的团队（即要搞.NET又要搞JAVA），总是希望找一种通用的技术，兼容所有技术平台，以便降低学习成本，无疑velocity是一种值得考虑的选择。 一、与str...
velocity语法大全
iteye_14984的博客
03-11 1004
什么是velocity Velocity是一个基于java的模板引擎（template engine）。它允许任何人仅仅简单的使用模板语言（template language）来引用由java代码定义的对象。 变量定义 #set($maxValue=5) #set($name="Bob") #set($arrayName=["element1","element2",...]) ...
velocity模板的语法简要汇总
whereismatrix的专栏
12-01 2958
velocity模板的语法简要汇总
一个页面两个table的样式修改
weixin_52563146的博客
08-10 1574
一个页面两个不同el-table的样式修改 注意：修改el-table的样式的时style标签不能加上scoped 如果页面有两个el-table，那么给每一个el-table加加一个class类名，来分别写它们的样式，对于两个公共部分的样式，则可以通过全局的写法.el-table来写,比如下面例子中去掉table中的线条的样式，就是全局的写法 <el-table :data="tableData" style="width: 100%" height="250" class="createInfo"
bootstrap table 样式
最新发布
10-11
bootstrap table 样式可以通过添加 Bootstrap 的 CSS 类来实现。在一个表格元素上添加 `.table` 类可以让它带有基本的样式，例如斑马线条纹、边框、卡片式样等等。还有一些其他的类可以让表格更加美观和易于阅读，例如 `.table-striped`、`.table-bordered`、`.table-hover` 等等。 另外，Bootstrap 还提供了一些对响应式设计友好的表格样式，例如 `.table-responsive` 类可以让表格在小屏幕设备上自适应。 以下是一个基本的带有 Bootstrap 样式的表格示例： ```html <table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值