h5的table表格邊框線問題解決方案

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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章