生成一个像素的圆角表格/一个像素表格

最新推荐文章于 2024-09-02 09:22:58 发布

原创最新推荐文章于 2024-09-02 09:22:58 发布 · 1k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#html 表格圆角

程序设计专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS创建并美化表格的方法。通过具体的代码示例展示了如何定义表格的布局、边框以及单元格的样式等。适用于前端开发者学习和参考。

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

<style>

table{margin:0 auto; }
.tborder td{font-size: 14px;color: #333333;border: #ccc 1px solid; padding: 10px 21px 10px 21px;vertical-align: top;}
.tborder td:not(:last-child){ border-bottom: 0;border-right: 0;}
.tborder td:last-child{ border-bottom: 0;border-left: #ccc 1px solid;}
.tborder tr:last-child td{border-bottom: #ccc 1px solid;}

.tborder tr:first-child td:first-child{border-top-left-radius: 3px;}
.tborder tr:last-child td:first-child{border-bottom-left-radius: 3px;}
.tborder tr:first-child td:last-child{border-top-right-radius: 3px;}
.tborder tr:last-child td:last-child{border-bottom-right-radius: 3px;}
</style>
<table cellspacing="0" class="tborder">
<tr>
<td>Happy</td>
<td>New</td>
<td>Year</td>
<td>Year</td>
</tr>
<tr>
<td>New</td>
<td>Happy</td>
<td>Year</td>
<td>Year</td>
</tr>
<tr>
<td>New</td>
<td>Year</td>
<td>Happy</td>
<td>Year</td>
</tr>
</table>

制作一个像素表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<table width="300" border="1" cellspacing="0"  style="border-collapse:collapse;">
<tr>
	<td>a</td>
	<td></td>
	<td></td>
</tr>
<tr>
	<td></td>
	<td>b</td>
	<td></td>
</tr>
<tr>
	<td></td>
	<td></td>
	<td>c</td>
</tr>
</table>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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