CSS基础--table表格

最新推荐文章于 2023-12-29 12:43:57 发布

水果妹妹踩前端的坑

最新推荐文章于 2023-12-29 12:43:57 发布

阅读量289

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/Imagirl1/article/details/103919266

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

表格在th前面设置好每个宽度：（使用 <col >标签就可以提前设置好每一列的宽度）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				border-collapse:collapse;
			}
			table,td,th {
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
		    <col>
		    <col width="100">
		    <col width="200">
		    <col width="140">
		    <col width="80">
		    <tr>
		        <th>title1</th>
		        <th>title2</th>
		        <th>title3</th>
		        <th>title4</th>
		        <th>title5</th>
		    </tr>
		    <tr>
		        <td>content1</td>
		        <td>content2</td>
		        <td>content3</td>
		        <td>content4</td>
		        <td>content5</td>
		    </tr>
		    <tr>
		        <td>content1</td>
		        <td>content2</td>
		        <td>content3</td>
		        <td>content4</td>
		        <td>content5</td>
		    </tr>
		    <tr>
		        <td>content1</td>
		        <td>content2</td>
		        <td>content3</td>
		        <td>content4</td>
		        <td>content5</td>
		    </tr>
		</table>
	</body>
</html>

表格单元格边框合并为一个：

table { border-collapse:collapse; }
table,td,th { border: 1px solid black;}

水果妹妹踩前端的坑

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录