2022-08-18

【CSS】表格內畫斜線

參考資料 ----

老人家對 CSS 不熟，也聽說時下表格的主流做法也是以 CSS 設計，但工作需要，只能急就章，日後再優化吧...
  1.  
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <style>
  6. /* 左上右下斜線 */
  7. .slashTL2BR {
  8.   background: linear-gradient(to top right, #fff calc(50% - 1px), black , #fff calc(50% + 1px) )
  9. }
  10.  
  11. /* 左下右上斜線 */
  12. .slashBL2TR {
  13.   background: linear-gradient(to bottom right, #fff calc(50% - 1px), black , #fff calc(50% + 1px) )
  14. }
  15. </style>
  16. </head>
  17. <body>
  18.     <table border="1">
  19.         <tr>
  20.             <td class="slashTL2BR">
  21.                 <table border='0' width='100%'>
  22.                     <tr><td align="right">　　　　左上右下</td></tr> <!-- 以全形空白加大單一格子寬度 -->
  23.                     <tr><td>表格內斜線</td></tr>
  24.                 </table>
  25.             </td>
  26.         </tr>
  27.         <tr>
  28.         </tr>
  29.         <tr>
  30.             <td rowspan='2' class="slashBL2TR">
  31.                 <table border='0' width='100%'>
  32.                     <tr><td>左下右上</td></tr>
  33.                     <tr><td align="right">表格內斜線</td></tr>
  34.                 </table>
  35.             </td>
  36.         </tr>
  37.         <tr>
  38.         </tr>
  39.     </table>
  40. </body>
  41. </html>
  42.  



Labels: ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)