h5的table表格边框线问题解决方案

最新推荐文章于 2024-07-19 21:11:59 发布

酒书

最新推荐文章于 2024-07-19 21:11:59 发布

阅读量4.8k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/royal1235/article/details/104020273

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.你的表格效果可能是这样的：

2.也可能是这样的：

3.然后你给td一个个进行设置border可能就有了下面的效果：

4.上面是不是都挺丑的，可能尝试很多次改了很多次代码就是很丑，没事，下面是一种代码简便样式好看的效果：

5.完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.tablex{
    border: 1px solid #ccc;border-collapse: collapse; width:80%;text-align:center;
   }
.tablex th,.tablex td{
    border: 1px solid #ccc;padding: 10px;
   }
</style>
</head>
<body>
<!--   <a href="downloadTemplatex">下载</a> -->
 <table  class="tablex">
   <tr>
       <td>项目一</td>
       <td>项目二</td>
       <td>项目三</td>
       <td>项目四</td>
       <td>项目五</td>
       <td>项目六</td>
       <td>项目七</td>
   </tr>
   <tr>
       <td>珠穆峰装电梯</td>
       <td>太阳烧烤场</td>
       <td>基因代码重组</td>
       <td>填海计划</td>
       <td>长城贴瓷砖</td>
       <td>大秦登基现场直播</td>
       <td>大脑Q计划</td>
   </tr>
    <tr>
       <td>2022.09.09</td>
       <td>2023.12.09</td>
       <td>2024.06.21</td>
       <td>2026.09.09</td>
       <td>2029.12.29</td>
       <td>2033.06.11</td>
       <td>2039.02.31</td>
   </tr>
 </table>
</body>
</html>

感兴趣的小伙伴可以扫码关注下公众号哦，公众号会分享高质量的技术文章哦

酒书

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
4
评论
h5的table表格边框线问题解决方案

1.你的表格效果可能是这样的：2.也可能是这样的：3.然后你给td一个个进行设置border可能就有了下面的效果：4.上面是不是都挺丑的，可能尝试很多次改了很多次代码就是很丑，没事，下面是一种代码简便样式好看的效果：5.完整代码：<!DOCTYPE html><html><head><meta charset="...
复制链接

扫一扫