<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>用div+css類比表格對角線</title> <style type="text/css"> * { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; border-left:1px solid #999; border-top:1px solid #999; font-size:13px; text-align:center; width:500px; margin:50px auto; } td,th { border-right:1px solid #999; border-bottom:1px solid #999; padding:5px 0; background:#ddd; } td { background:#F7F8F5; } .mytablbox { width:100px; } .mytable { width:0; height:0; margin:-5px 0; position:relative; border-top:50px solid #ddd; border-left:100px solid #F7F8F5; } .mytable strong { display:block;position:absolute;top:-40px;left:-40px;width:35px; font-style:normal; } .mytable em { position:absolute; left:-90px; top:-17px; display:block; width:30px; font-style:normal; } </style></head><body> <table> <tr> <th class="mytablbox"> <div class="mytable"> <strong>類別</strong> <em>姓名</em> </div> </th> <th>表格</th> <th>表格</th> </tr> <tr> <td>表格</td> <td>表格</td> <td>表格</td> </tr> <tr> <td>表格</td> <td>表格</td> <td>表格</td> </tr> <tr> <td>表格</td> <td>表格</td> <td>表格</td> </tr> </table></body></html>
原理：利用border-top:50px solid #ddd; border-left:100px solid #F7F8F5;類比出三角形；
再用css定位固定文字的位置。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
