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. table {
  7.     width: 50%;
  8.     border-collapse: collapse;
  9.     margin: 20px auto;
  10.     font-family: Arial, sans-serif;
  11. }
  12.  
  13. th, td {
  14.     border: 1px solid #ccc;
  15.     padding: 8px;
  16.     text-align: center;
  17.     position: relative; /* For positioning the diagonal line and text */
  18. }
  19.  
  20. th {
  21.     background-color: #f2f2f2;
  22. }
  23.  
  24. /* 確保對角線和文字不會超出單元格的範圍 */
  25. .diagonal {
  26.     overflow: hidden; /* Hide anything outside the cell */
  27. }
  28.  
  29. /* 左上右下對角線 */
  30. .diagonal::before {
  31.     content: '';
  32.     position: absolute;
  33.     top: 0;
  34.     left: 0;
  35.     width: 100%;
  36.     height: 100%;
  37.     background: linear-gradient(to top right, transparent 49.5%, #ccc 49.5%, #ccc 50.5%, transparent 50.5%);
  38.     /* 你也可以調整線條顏色和粗細 */
  39. }
  40.  
  41. /* 左下半部的文字 */
  42. .left-down {
  43.     position: absolute;
  44.     bottom: 5px; /* Adjust position */
  45.     left: 5px; /* Adjust position */
  46.     font-size: 0.9em;
  47.     color: #555;
  48.     z-index: 1; /* Ensure text is above the line */
  49. }
  50.  
  51. /* 右上半部的文字 */
  52. .right-up {
  53.     position: absolute;
  54.     top: 5px; /* Adjust position */
  55.     right: 5px; /* Adjust position */
  56.     font-size: 0.9em;
  57.     color: #555;
  58.     z-index: 1; /* Ensure text is above the line */
  59. }
  60.  
  61.  
  62. /* -------------------------------------------------------------------------- */
  63. .reverse-diagonal {
  64.     overflow: hidden; /* 和 diagonal 相同，隱藏超出內容 */
  65.     position: relative; /* 和 diagonal 相同，用於內部定位 */
  66. }
  67.  
  68. .reverse-diagonal::before {
  69.     content: '';
  70.     position: absolute;
  71.     top: 0;
  72.     left: 0;
  73.     width: 100%;
  74.     height: 100%;
  75.     background: linear-gradient(to bottom right, transparent 49.5%, #ccc 49.5%, #ccc 50.5%, transparent 50.5%);
  76.     /* 你也可以調整線條顏色和粗細 */
  77. }
  78.  
  79. /* 左上半部的文字 */
  80. .left-up {
  81.     position: absolute;
  82.     top: 5px; /* Adjust position */
  83.     left: 5px; /* Adjust position */
  84.     font-size: 0.9em;
  85.     color: #555;
  86.     z-index: 1; /* Ensure text is above the line */
  87. }
  88.  
  89. /* 右下*/
  90. .right-down {
  91.     position: absolute;
  92. 	bottom: 5px; /* Adjust position */
  93.     right: 5px; /* Adjust position */
  94.     font-size: 0.9em;
  95.     color: #555;
  96.     z-index: 1; /* Ensure text is above the line */
  97. }
  98. </style>
  99. </head>
  100. <body>
  101. 	<table>
  102.         <thead>
  103.             <tr>
  104.                 <th class="diagonal">
  105.                     <div class="right-up">右上半部的文字</div>
  106. 					<div class="left-down">左下半部的文字</div>
  107.                 </th>
  108.                 <th>標題2</th>
  109.                 <th>標題3</th>
  110.             </tr>
  111.         </thead>
  112.         <tbody>
  113.             <tr>
  114.                 <td>資料A1</td>
  115.                 <td>資料A2</td>
  116.                 <td>資料A3</td>
  117.             </tr>
  118.             <tr>
  119.                 <td>資料B1</td>
  120.                 <td>資料B2</td>
  121.                 <td>資料B3</td>
  122.             </tr>
  123.         </tbody>
  124.     </table>
  125. 	
  126. 	<br />
  127. 	<br />
  128. 	
  129. 	<table>
  130.         <thead>
  131.             <tr>
  132.                 <th class="reverse-diagonal">
  133.                     <div class="left-up">左上半部的文字</div>
  134.                     <div class="right-down">右下半部的文字</div>
  135.                 </th>
  136.                 <th>標題2</th>
  137.                 <th>標題3</th>
  138.             </tr>
  139.         </thead>
  140.         <tbody>
  141.             <tr>
  142.                 <td>資料A1</td>
  143.                 <td>資料A2</td>
  144.                 <td>資料A3</td>
  145.             </tr>
  146.             <tr>
  147.                 <td>資料B1</td>
  148.                 <td>資料B2</td>
  149.                 <td>資料B3</td>
  150.             </tr>
  151.         </tbody>
  152.     </table>
  153. 	
  154. </body>
  155. </html>
  156.  




Labels: ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)