首页 > 其他分享 >简洁清爽表格css

简洁清爽表格css

时间:2022-11-08 14:11:44浏览次数:42  
标签:gridtable 表格 color 清爽 width table 666666 border css

效果图

压缩后的CSS

<table class="gridtable"> table部分设置class=gridtable即可

table.gridtable{font-family:verdana,arial,sans-serif;font-size:11px;color:#333333;border-width:1px;border-color:#666666;border-collapse:collapse}
table.gridtable th{border-width:1px;padding:8px;border-style:solid;border-color:#666666;background-color:#dedede}
table.gridtable td{border-width:1px;padding:8px;border-style:solid;border-color:#666666;background-color:#ffffff}

完整html代码

<!DOCTYPE html>
<html>
<head>
	<title>简洁清爽表格css</title>
	<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 th {
			border-width:1px;
			padding:8px;
			border-style:solid;
			border-color:#666666;
			background-color:#dedede;
		}
		table.gridtable td {
			border-width:1px;
			padding:8px;
			border-style:solid;
			border-color:#666666;
			background-color:#ffffff;
		}
	</style>
</head>
<body>
	<table class="gridtable">
	  <tr>
	    <th>姓名</th>
	    <th>年龄</th>
	    <th>性别</th>
	    <th>创建时间</th>
	  </tr>
		<tr><td>张三</td><td>12</td><td>男</td><td>2022-11-03 17:28:09</td></tr>
		<tr><td>李四</td><td>12</td><td>男</td><td>2022-11-03 17:28:09</td></tr>
		<tr><td>王五</td><td>12</td><td>男</td><td>2022-11-03 17:28:09</td></tr>
		<tr><td>赵六</td><td>12</td><td>男</td><td>2022-11-03 17:28:09</td></tr>
	</table>
</body>
</html>

标签:gridtable,表格,color,清爽,width,table,666666,border,css
From: https://www.cnblogs.com/JaminXie/p/16869507.html

相关文章

  • scss 语法
    scss语法介绍 这里既然是对语法的介绍,那么至于如何安装和编译scss我就不多少了,主要是因为本人在群里认识的小伙伴有的不会用scss,所以就借着放假的机会来对scss语法做......
  • 用一个 CSS 属性打造自适应网站
    英文|https://dev.to/dip15739/responsive-website-with-only-1-css-property-3ea9作者|DipVachhani用一个css属性创建一个响应式网站,让我们来看看它是如何做到的。以......
  • 7种在React中使用CSS的方式
    第一种:在组件中直接使用style不需要组件从外部约会css文件,直接在组件中书写。importreact,{Component}from"react";constdiv1={width:"300px",margin:"30px......
  • 如何使用HTML和CSS进行分页?
    英文 | https://www.geeksforgeeks.org/how-to-make-a-pagination-using-html-and-css/?ref=rp翻译|web前端开发(web_qdkf)要为页面创建分页效果非常简单,你可以使用Boots......
  • CSS布局秘籍(2)-6脉神剑
    HTML系列:人人都懂的HTML基础知识-HTML教程(1)HTML元素大全(1)HTML元素大全(2)-表单CSS系列:CSS基础知识筑基常用CSS样式属性CSS选择器大全48式CSS布局秘籍(1)......
  • iview form组件中可编辑表格校验
    <template><Layoutclass="rightContent"><Content><divclass="my-page"><Formref="form":model="formData":rules="rules":label-width="8......
  • CSS3的 transform属性,怎么才能让他同时执行多个不同动画(变换属性)效果
    如果要给一个dom元素,同时设置多个不同的CSS变换(transform)属性时,在属性中间用空格隔开即可,旋转缩放扭曲等同时执行多个效果!div{width:100px;height:1......
  • CSS鼠标样式【cursor】
    cursor:hand;手型cursor:pointer;手型cursor:auto;由系统自动给出cursor:crosshair;十字型cursor:text;I字形cursor:wait;等待cursor:default;默认cursor:e-resize;......
  • 通过css 改变通过img标签引入的svg颜色
    前言修改svg颜色,一般直接修改文件的svg的fill属性就可以了,可以直接改svg属性,也可以通过css修改,但是前端一般都是通过img标签直接引入的svg图片,这样不管是从后期维护还是代......
  • webpack中配置CSS兼容性时报错 Failed to parse package.json data
      是因为在package.json中添加了注释正确webpack配置CSS兼容性的步骤:npmipostcss-loaderpostcss-preset-env-D/webpack.config.jsmodule:{    ru......