html写出任意的table效果,HTML不使用Table标签怎么写出Table表格的效果-大型CMS开发实战第九期..._美美bv的博客-程序员秘密

技术标签: html写出任意的table效果  

实例

html>

如何在不使用Table标签怎么写出Table表格的效果

*{

padding: 0;

margin: 0;

font-size: 1rem;

}

/* body {

background: #000000;

} */

.table {

width: 607px;

height: 300px;

display: table;

text-align: center;

box-sizing: border-box;

margin: 0 auto;

position: relative;

}

.table-caption {

padding: 10px;

display: table-caption;

}

.table-caption > h1 {

color: cadetblue;

font-size: 1.4rem;

}

.table-thead {

display: table-header-group;

}

.table-row {

display: table-row;

height: 40px;

}

.table-row:first-of-type >.table-td  {

border-top: 1px solid rgba(0,0,0,.3);

}

.table-tbody {

display: table-row-group;

}

.table-td {

display: table-cell;

border-bottom: 1px solid rgba(0,0,0,.3);

border-right: 1px solid rgba(0,0,0,.3);

width: 100px;

height: 40px;

line-height: 40px;

}

.table-td:first-of-type{

border-left: 1px solid rgba(0,0,0,.3);

}

.table-tfoot{

display: table-footer-group;

position: relative;

}

.table-tfoot > .table-td:first-of-type {

width: 101px;

background: linear-gradient(greenyellow,cadetblue);

color: #333;

position: absolute;

left: 0;

}

.table-tfoot > .table-td:last-of-type {

width: 506px;

background: linear-gradient(greenyellow,cadetblue);

color: #333;

position: absolute;

left:101px;

}

.table-tbody > .table-row:nth-last-of-type(4) > .table-td:first-of-type {

width: 241px;

background: yellow;

color: #333;

position: absolute;

left: 0;

}

.table-tbody > .table-row:nth-last-of-type(4) > .table-td:last-of-type {

width: 364px;

background: yellow;

color: #333;

position: absolute;

left:243px;

}

七年级(15)班课程表

星期一

星期二

星期三

星期四

星期五

语文

数学

语文

英语

数学

语文

数学

语文

英语

数学

语文

数学

语文

英语

数学

语文

数学

语文

英语

数学

上午:7:20 - 11:40

下午:14:20 - 17:40

数学

语文

英语

数学

数学

数学

语文

英语

数学

数学

数学

语文

英语

数学

提示:

如遇到特殊情况课程需要调整时,会在群内另行通知

运行实例 »

点击 "运行实例" 按钮查看在线实例

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30198949/article/details/117822645

智能推荐

基于Haar特征的Adaboost级联人脸检测分类器_bbzz2的博客-程序员秘密

基于Haar特征的Adaboost级联人脸检测分类器基于Haar特征的Adaboost级联人脸检测分类器,简称haar分类器。通过这个算法的名字,我们可以看到这个算法其实包含了几个关键点:Haar特征、Adaboost、级联。理解了这三个词对该算法基本就掌握了。1        算法要点Haar分类器 = Haar-like特征 + 积分图方法 + AdaBoost +级联;

第11周 项目三-点类派生直线类_冷基栋_攻城师的博客-程序员秘密

定义点类Point,并以点类为基类,派生出直线类Line,从基类中继承的点的信息表示直线的中点。请阅读下面的代码,并将缺少的部分写出来。#include#includeusing namespace std;class Point //定义坐标点类{public: Point():x(0),y(0) {}; Point(double x0, double

ngx_lua 模块支持 subrequest 了!_iteye_1105的博客-程序员秘密

ngx_lua 模块将 Lua 整合在 NginX 中,使用 Lua coroutine per request 机制实现无缝的 I/O 复用处理。受益于 Lua 解释器的极低开销和原生 coroutine 支持,用户代码仍然能以习惯的顺序方式编写,丝毫不会感受到 NginX I/O 复用结构的存在,同时又能享受到其天然的非阻塞大并发能力和非凡的速度。借助 agentzh 在 ngx_echo...

自动刷抖音极速版得红包金币(APP实现)_自动刷抖音极速版神器_景兄弟1366的博客-程序员秘密

上回我们用python实现了自动刷抖音的功能(https://blog.csdn.net/u012539700/article/details/100058939),这回我们用android app的形式来实现自动刷抖音,这样就可以不用连接电脑啦。 原理很简单,使用android无障碍里面的AccessibilityService就可以啦。 首先在res目录下新建一个xml文件...

php_pthreads.dll,PHP多线程扩展Pthreads只能运行在ts安全线程_哲部豪跋的博客-程序员秘密

本来想测试下,结果无论本地或生产环境都是nts,所以这里只说安装,不说使用,因为没用上。windows版本的下载地址http://windows.把pthreadVC2.dll和php_pthreads.dll文件,把vc2文件放到php.exe同级目录,把php_pthreads.dll放到扩展目录下。1、修改php.ini文件 添加extension=php_pthreads.dll2、Apa...

springboot整合02_依依y6的博客-程序员秘密

整合定时任务1.引入依赖`<!--定时任务的依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-quartz</artifactId> </dependency>简单测试@Componentpubl

随便推点

计算机毕业设计、计算机课程设计怎么做?计算机设计1900套来帮你!_我要少吃肉的博客-程序员秘密

计算机毕业设计、计算机课程设计怎么做?计算机设计1900套来帮你!人生做什么事都有套路,大学毕业设计、课程设计通常比较简单,大多数都是找个项目做参考,有的人随便抄一抄糊弄一下,只要查重,格式别出错就行。学校也不傻,毕设、课设上卡你们没什么意义,赶紧把你们送走才是最重要的这里可参考计算机毕业设计1900套来帮你!帮你轻松搞定毕设、课设。是学习参考的优秀模板,既可以作为提高优秀同学的毕设质量,也可以作为给某些同学糊弄参考通过的保障。计算机毕业设计1900套,帮你事半功倍,具体所有名称项目清单看照片目录。获取方式

ES基本查询总结_es数据查询_ZhaoYingChao88的博客-程序员秘密

ES与数据库比较 查询操作Elasticsearch中当我们设置Mapping(分词器、字段类型)完毕后,就可以按照设定的方式导入数据。有了数据后,我们就需要对数据进行检索操作。根据实际开发需要,往往我们需要支持包含但不限于以下类型的检索:1)精确匹配,类似mysql中的 “=”操作;2)模糊匹配,类似mysql中的”like %关键词% “查询操作;3)前缀匹配;4)...

Vuepress博客美化技巧_ReevesJ的博客-程序员秘密

文章目录导航栏透明+背景图填充+悬浮气泡背景图填充导航栏透明图片中的点击向下跳转的样式悬浮气泡导航栏透明+背景图填充+悬浮气泡背景图填充效果图:下面的小框扩展到大框,让后面的导航栏透明更完善一些。编辑Theme/components/HomeBlog.vue下的.hero { margin $navbarHeight auto 0 position relative box-sizing border-box padding 0 20px hei

vite/Vuecli配置proxy代理解决跨域_vite设置dev proxy_williamyi74的博客-程序员秘密

上代码:import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import { resolve } from 'path';// https://vitejs.dev/config/export default defineConfig({ server: { port: 9090, strictPort: true, // 严格端口 true:如果端口已被使用,则直接退出,而不会再

Mathematica三维坐标系的建立_mathematica画图设置x轴三维_sachin_woo的博客-程序员秘密

背景某些情况下(如在三维绘图),需要绘制系统坐标系。首先来看一下三维迪卡尔坐标系的组成:坐标原点(0,0,0),带箭头的坐标轴,坐标轴标签。因此在绘制坐标系,需要绘制这些元素。Mathematica实现coordinateSystem3D = { {RGBColor[{1, 0, 0}], Arrowheads[0.05], Arrow[Tube[{{0, 0, 0}, {1, 0,...

TPS、QPS、并发数、Throughput等概念_tps代表什么_偷懒的加菲的博客-程序员秘密

1. TPS(每秒传输的事物处理个数)概念:即服务器每秒处理的事务数。TPS是软件测试结果的测量单位。TPS包括一条消息入和一条消息出,加上一次用户数据库访问。业务 TPS = CAPS × 每个呼叫平均TPS一个事务是指一个客户机向服务器发送请求然后服务器做出反应的过程。客户机在发送请求时开始计时,收到服务器响应后结束计时,以此来计算使用的时间和完成的事务个数。一般的,评价系统...

推荐文章

热门文章

相关标签