CSS代码片段:表格应用,图片垂直居中 图表垂直居中.img-container { line-height: 300px; height: 300px; font-size: 0; text-align: center; background-color: chocolate; } .img-container img { height:96px; display: inline-block; vertical-align:middle; padding:0 10px; } <div class="img-container"> <div> <img src="1.png" alt="1"> <img src="1.png" alt="2"> </div> </div>效果表格代码片段表头+第二行三列+第三行四列<style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { border: none; /* 移除表头的边框 */ } .no-border { border: none; /* 移除特定单元格的边框 */ } .single-border td { border-right: none; /* 移除右边框 */ } .single-border td:last-child { border-right: 1px solid black; /* 最后一列保留右边框 */ } </style> <table> <tr> <th>Header 1</th> <td class="no-border"></td> <td class="no-border"></td> <td class="no-border"></td> </tr> <tr class="single-border"> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr class="single-border"> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>效果:表头+第二行二列(1、3格，2、4格空) + 第三行四列<style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { border: none; /* 移除表头的边框 */ } .no-border { border: none; /* 移除特定单元格的边框 */ } .single-border td { border-right: none; /* 移除右边框 */ } .single-border td:last-child { border-right: 1px solid black; /* 最后一列保留右边框 */ } </style> <table> <tr> <th>Header 1</th> <td class="no-border"></td> <td class="no-border"></td> <td class="no-border"></td> </tr> <tr> <td>Cell 1</td> <td class="no-border"></td> <td>Cell 2</td> <td class="no-border"></td> </tr> <tr class="single-border"> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>效果