table白色粗边框改为黑色细边框的方法

最新推荐文章于 2022-08-12 10:58:16 发布

前水员

最新推荐文章于 2022-08-12 10:58:16 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： html html5 css css3

本文链接：https://blog.csdn.net/qq_43465434/article/details/111809034

版权

前端专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何使用CSS将HTML table的白色粗边框改为黑色细边框。通过修改内外边框，或者利用table的rules属性，可以实现边框样式的改变。示例代码展示了具体的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚学table标签时，给table加上边框后出现了一个很难看的白色边框，如下所示。
在这里插入图片描述
这个奇怪的白色边框出现的原因也很简单，这里我给table设置的是border=“1px”,结果就是整个table和table内的块状格子都添加了边框。那么如何将它修改成看起来很舒服的效果呢。

1.内外边框同时修改

例如下面这个效果图：
在这里插入图片描述
我们可以考虑这么做，我们可以利用外边框和内边框的距离，将这些距离都填充为黑色就可实现。将每个单元小格的背景颜色设置为白色，然后再将整个table的背景色设置为黑色即可实现。
下面是代码部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			tr{
				background-color: white;
			}
		</style>
	</head>
	<body>
		<table border="1px" bgcolor="black">
			<tr>
				<td>1-1</td>
				<td>1-2</td>
				<td>1-3</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
				<td>2-2</td>
			</tr>
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<td>3-3</td>
			</tr>
		</table>
	</body>
</html>

2.只修改外边框

这里我们可以用table自带属性rules来实现，将rules的值设置为all（将内侧行列边框设置为可见）。
这里要说明一下，rules是专门只对内边框作用的属性，table再添加rules后，table的border属性就只对外边框起作用。而我们table默认是没有边框的，在不设置border只设置rules的情况下内边框依然会显示。
所以，当我们在table中设置边框和rules="all"之后，就会变成如下效果：
在这里插入图片描述
调整一下border的值（这里设置为2px）就可以达到大部分人想要的效果：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="2px" rules="all">
			<tr>
				<td>1-1</td>
				<td>1-2</td>
				<td>1-3</td>
			</tr>
			<tr>
				<td>2-1</td>
				<td>2-2</td>
				<td>2-2</td>
			</tr>
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<td>3-3</td>
			</tr>
		</table>
	</body>
</html>