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

1.你的表格是这样:
h5的table表格边框线问题解决方案_第1张图片
2.也可能是这样的:
h5的table表格边框线问题解决方案_第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>

你可能感兴趣的:(vue+element,html,vue)