css 一像素边框表格

1表格一像素边框

有三要素:1<table border=0>  2table的样式设置border-collapse:collapse;  3 td的样式设置border:#ccc solid 1px;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         table{
 8             border-collapse: collapse;
 9         }
10         td{
11             width: 200px;
12             height:32px;
13             border:#ccc solid 1px;
14         }
15     </style>
16 </head>
17 <body>
18 <table border=0  id="aqi-table">
19
20     <tr>
21         <td>1</td>
22         <td>2</td>
23         <td>3</td>
24     </tr>
25     <tr>
26         <td>1</td>
27         <td>2</td>
28         <td>3</td>
29     </tr>
30     <tr>
31         <td>1</td>
32         <td>2</td>
33         <td>3</td>
34     </tr>
35 </table>
36 </body>
37 </html>

效果如下:

时间: 2024-10-10 06:59:10

css 一像素边框表格的相关文章

移动端1像素边框问题与CSS媒体查询

做移动端页面开发时,我们是按照UI设计图上的尺寸来做的. 比如说,UI给的图是750x1344(Iphone6标准),我们在浏览器做适配时,按照375x667来裁切,设计图上30像素的高度,开发时使用的是15px,这是因为Iphone6的设备像素比为2,css中的1px在设备中的像素为2px.当我们需要实现设计图中1px高度的边框时,在css中的1px实际上变成了2px边框,由此产生了1像素边框问题. 1.window.devicePixelRatio设备像素比 定义: window.devic

CSS 四个样式表格

1. 单像素边框CSS表格 这是一个很常用的表格样式. 源代码: <!-- CSS goes in the document HEAD or added to your external stylesheet --><style type="text/css">table.imagetable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px

HTML &amp; CSS &amp; JavaScript 从一个表格到一个灰阶颜色表 01

工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简介 HTML <!DOCTYPE> 标签 HTML <html> 标签 HTML <head> 标签 HTML <meta> 标签 HTML <title> 标签 HTML <body> 标签 例 1:一个简单的 HTML 表格,包含三行

CSS实现多重边框和内凹圆角

CSS实现多重边框 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS实现多重边框</title> 6 <style> 7 div { 8 width: 100px; 9 height: 150px; 10 margin: 40px auto; 11 text-a

Css制作table细线表格

Css制作table细线表格 关键点: table {border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */border:1px solid #999; /* 设置边框属性:样式(solid=实线).颜色(#999=灰) */}

bootstrap-表格-带边框表格

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表格</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --&g

移动端0.5像素0.5像素边框0.5像素圆角边框

0.5像素线条: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes&quo

移动web 1像素边框

实现方法 border-image 图片 实现 这篇文章是腾讯github上的解决方案border-image来实现的 链接走起 <使用border-image实现类似iOS7的1px底边>,缺点是,你需要制作图片,圆角的时候会出现模糊. .border-image-1px { border-width: 1px 0px; -webkit-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAE

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:边框表格

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 边框表格</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&q