老人家對 CSS 不熟,也聽說時下表格的主流做法也是以 CSS 設計,但工作需要,只能急就章,日後再優化吧...
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> table { width: 50%; border-collapse: collapse; margin: 20px auto; font-family: Arial, sans-serif; } th, td { border: 1px solid #ccc; padding: 8px; text-align: center; position: relative; /* For positioning the diagonal line and text */ } th { background-color: #f2f2f2; } /* 確保對角線和文字不會超出單元格的範圍 */ .diagonal { overflow: hidden; /* Hide anything outside the cell */ } /* 左上右下對角線 */ .diagonal::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top right, transparent 49.5%, #ccc 49.5%, #ccc 50.5%, transparent 50.5%); /* 你也可以調整線條顏色和粗細 */ } /* 左下半部的文字 */ .left-down { position: absolute; bottom: 5px; /* Adjust position */ left: 5px; /* Adjust position */ font-size: 0.9em; color: #555; z-index: 1; /* Ensure text is above the line */ } /* 右上半部的文字 */ .right-up { position: absolute; top: 5px; /* Adjust position */ right: 5px; /* Adjust position */ font-size: 0.9em; color: #555; z-index: 1; /* Ensure text is above the line */ } /* -------------------------------------------------------------------------- */ .reverse-diagonal { overflow: hidden; /* 和 diagonal 相同,隱藏超出內容 */ position: relative; /* 和 diagonal 相同,用於內部定位 */ } .reverse-diagonal::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom right, transparent 49.5%, #ccc 49.5%, #ccc 50.5%, transparent 50.5%); /* 你也可以調整線條顏色和粗細 */ } /* 左上半部的文字 */ .left-up { position: absolute; top: 5px; /* Adjust position */ left: 5px; /* Adjust position */ font-size: 0.9em; color: #555; z-index: 1; /* Ensure text is above the line */ } /* 右下*/ .right-down { position: absolute; bottom: 5px; /* Adjust position */ right: 5px; /* Adjust position */ font-size: 0.9em; color: #555; z-index: 1; /* Ensure text is above the line */ } </style> </head> <body> <table> <thead> <tr> <th class="diagonal"> <div class="right-up">右上半部的文字</div> <div class="left-down">左下半部的文字</div> </th> <th>標題2</th> <th>標題3</th> </tr> </thead> <tbody> <tr> <td>資料A1</td> <td>資料A2</td> <td>資料A3</td> </tr> <tr> <td>資料B1</td> <td>資料B2</td> <td>資料B3</td> </tr> </tbody> </table> <br /> <br /> <table> <thead> <tr> <th class="reverse-diagonal"> <div class="left-up">左上半部的文字</div> <div class="right-down">右下半部的文字</div> </th> <th>標題2</th> <th>標題3</th> </tr> </thead> <tbody> <tr> <td>資料A1</td> <td>資料A2</td> <td>資料A3</td> </tr> <tr> <td>資料B1</td> <td>資料B2</td> <td>資料B3</td> </tr> </tbody> </table> </body> </html>
![]() |
沒有留言:
張貼留言