定义Table时显示表格边框显示1px

最新推荐文章于 2021-06-25 16:00:58 发布
原创 最新推荐文章于 2021-06-25 16:00:58 发布 · 2.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#table #border #css

本文介绍了一种使用CSS精确控制HTML表格边框的方法，通过设置table的border-collapse属性为collapse，并定义单元格(td)的边框样式，实现1px边框的准确显示。

关键属性：border-collapse

 

如果用表格的border="1"属性定义，实际显示的宽度要比1px粗。

所以我直到现在都是定义table的left和top边框，然后定义td的right和bottom边框，这样也用css定义了一个表格的边框。

 

例子：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>定义</title>
<style>
table{ border-collapse:collapse; }
td{ border:#ccc solid 1px; padding:5px; }
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>1px表格边框</td>
    <td>1px表格边框</td>
    <td>1px表格边框</td>
  </tr>
  <tr>
    <td>1px表格边框</td>
    <td>1px表格边框</td>
    <td>1px表格边框</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

 

MemoryBook
关注
css+table 1px边框单元格
10-30
### CSS + Table 1px边框单元格 在网页设计中，使用表格（`<table>`）来布局页面内容是一种常见的做法。为了使表格看起来更加美观、整洁，开发者经常需要为表格添加边框。传统的做法是通过设置表格背景和单元格背景...
css 解决表格边框不显示的问题
09-25
再来看给出的代码示例，`<table border="1" width="100%" id="table1">`表明了使用内联样式定义表格边框，`border="1"`是HTML4中用于设置边框宽度的方法，在HTML5中已经不推荐使用，而是推荐使用CSS类或内联样式。...
设置table边框为1px
weixin_43941291的博客
08-26 2709
第一种： 1、将table的属性设置为：BORDER=0 、cellspacing=1 ； 2、设置table的背景色为即你要设置的table的边框颜色； 3、设置所有td背景色为#ffffff白色； table { background-color:black; } td { background-color:white } 第二种方法： table { border-collapse: collapse; border: none; } td { border: solid
Table 1px边框
05-04 4868
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 定义表格边框的方法 table{ border-collapse:collapse; } td{ border:#ccc solid 1px; padding:5px; }
将HTML table元素的单元格及边框设置成1px
12-10 205
table{ 　　border-collapse:collapse; 　　border:none;} td { 　　border:1px solid #EE7700;} 转载于:https://www.cnblogs.com/Arlar/p/5035277.html
border为1px的table 以及 table中cellspacing、cellpadding的css替代写法
u014686861的专栏
11-27 3806
设置Table的细边框通常有这么三种方式（border为1px的table）：   （一）第一种方法 1、设置边框的BORDER=0 、cellspacing=1，设置Table的背景色为所要的边框色，再设置所有的td背景色为白色，这样细边框就显露出来了。这个方法有些邪气，看似不太正宗，但是也能达到效果，条条大路通罗马嘛！   （二）第二种方法   2、设置BORDER=0 ，再通过
table 1px边框
michaelia530的专栏
11-29 557
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 定义表格边框的方法 table{ border-collapse:collapse; } td{ border:#ccc solid 1px; padding:5px; }
html做表格只显示表格的外边框
09-22
要实现只显示外边框的效果，我们需要使用CSS来控制表格边框的样式。具体而言，我们可以将边框设置为`none`，使得内部单元格的边框不显示，同时为整个表格设置一个外边框。在提供的代码示例中，已经使用了内联样式来...
HTML table表格边框的控制详细说明
09-28
1. 使用`border`属性定义表格边框的宽度、样式和颜色。 ```html <table border="1" style="border-style:solid; border-width:1px; border-color:#000;"> ``` 2. 使用`frame`属性指定表格外部边框的显示方式。 ...
表格边框以虚线显示的css样式
12-08
这里提到的"表格边框以虚线显示的css样式"是一种常见的表格美化技术，通过CSS来控制表格的边框样式，使其呈现出虚线效果。下面我们将详细探讨如何实现这一效果。 首先，我们需要了解CSS中的边框属性（border）。在...
HTML中表格table边框border（1px还嫌粗）的解决方案：
weixin_30700099的博客
07-28 770
摘自：http://blog.sina.com.cn/s/blog_ae809a730102vrx8.html 第一种方法： 1、将table的属性设置为：BORDER=0 、cellspacing=1 ； 2、设置table的背景色为即你要设置的table的边框颜色； 3、设置所有td背景色为#ffffff白色； 这样，就大功告成了。 第二种方法： 1、设置BORDER=...
css实现table1px边框
diligentcat的专栏
09-08 1209
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 定义表格边框的方法 table{ border-collapse:collapse;
设置表格1px边框线的两种方式
吴钦飞
08-20 3971
方式一       使用 CSS属性 border-collapse 方式二
CSS设置1PX边框的Table表格
weixin_30305735的博客
12-03 313
写页面布局时经常会遇到1PX边框的表格，对于罗列显示大量数据来说，table是非常合适的，table本身的意义就在于罗列显示数据，web标准化并非是指不去用table标签，而是说不用table去布局，table本身也是属于标准内的。 本身table设置border：0的话，边框其实是2px。如果想实现1PX边框，可以如下设置： table { border: ...
html table的边框线怎么变圆角_CSS如何设置html table表格边框样式
weixin_39800918的博客
12-21 4525
CSS如何设置table表格边框样式对table设置css样式边框，分为几种情况：1、只对table设置边框2、对td设置边框3、对table和td技巧性设置表格边框4、对table和td设置背景，实现完美表格边框以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例演示。为了便于观察，divcss5均设置所有案例表格为1px实线红色边框为例；table宽度为400px;表格为三列三...
table 设置高度但是实际高度更高_内联元素的高度
weixin_39661589的博客
12-08 501
内联元素的高度比较难确定，应该涉及到字体设计本身的高度度问题，下面我们来简单探索：先看一张图：有代码来详细解释：字体100px，相当于这个字体最高的字上面距离最低的字下面的距离。尺子测量97.5差不多。这也说明这个字体还有别的字比h更高或者比g更低。加上中文就比较容易看懂了。中文这里可以看到你好两个最高最低只有92.5px，但是你好两个字最高处比h最高处还要高。字体的高度设置为100px，但是这个...
解决table的宽高总是比td大4px的溢出问题
EGeek
02-10 942
问题：已知table的margin=0、border=0、padding=0，但table做的背景溢出，如下图。 问题定位：通过Chrome的代码检测发现table中border-pacing默认为2px，如下图。 解决方法：css代码修改table的border-pacing为0px，如下图。 结果：table的背景未溢出，如下图。 原理分析 border-spacing是表格的边框间距...
html设置table border,用css来设置table的border
weixin_39904268的博客
06-25 2745
在网页中table是一种很好的展示数据的标签。默认情况下，table是没有border的，但是我们为了好看，经常要给table加上border。而且IE7/8/9下border的颜色还不一样，下面我们就来看看如何用css来控制table的border的显示。首先，我们创建一个简单的table，代码如下：first rowfirst rowsecond rowsecond row初始样式很简单：.m...
table 边框显示
最新发布
07-25
### 设置表格边框显示样式的方法 在 HTML 中，表格的边框样式可以通过 CSS 进行精细控制，以实现美观的视觉效果。默认情况下，表格的边框可能显得过于粗重或不符合页面的整体风格，因此需要使用特定的 CSS 属性来调整[^1]。 #### 使用 `border-collapse` 合并边框 `border-collapse` 属性用于控制表格中单元格边框的合并方式。设置为 `collapse` 可以让相邻单元格的边框合并为一个边框，从而实现更简洁的外观。这对于创建细边框的表格尤为重要[^3]。 ```css table { border-collapse: collapse; } ``` #### 设置统一的 1px 边框 为了实现 1px 的细边框效果，可以通过 CSS 为表格的 `td` 元素分别设置 `border` 属性。这种方式不仅适用于网页，而且在 Word 文档中也能正常显示[^2]。 ```css td { border: solid #ccc 1px; padding: 5px; } ``` #### 控制表格布局 `table-layout` 属性用于定义表格的布局算法，可以选择 `auto` 或 `fixed`。`fixed` 布局适用于需要严格控制列宽的情况，而 `auto` 布局则根据内容自动调整列宽[^1]。 ```css table { table-layout: fixed; width: 100%; } ``` #### 设置边框间距 如果需要边框之间保持一定距离，可以使用 `border-spacing` 属性。该属性仅在 `border-collapse` 设置为 `separate` 时生效，用于定义相邻单元格边框之间的横向和纵向间距。 ```css table { border-collapse: separate; border-spacing: 5px 10px; } ``` #### 示例代码 以下是一个完整的 HTML 示例，展示了如何通过 CSS 设置表格边框的样式，实现 1px 的细边框效果： ```html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表格边框样式</title> <style> table { border-collapse: collapse; table-layout: fixed; width: 100%; } td { border: solid #ccc 1px; padding: 5px; } </style> </head> <body> <table> <tr> <td>1px表格边框</td> <td>1px表格边框</td> <td>1px表格边框</td> </tr> <tr> <td>1px表格边框</td> <td>1px表格边框</td> <td>1px表格边框</td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> ``` 通过上述方法，可以灵活地调整表格边框的显示样式，以满足不同的设计需求。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值