從我開始設計網站到現在,就知道用CSS的border參數是無法畫出表格斜線的,但隨者CSS的發展到CSS3之後,已經延伸出一種可以畫出像以下範例的表格斜線的方法: 就是使用線性漸變的方法(linear-gradient)來實現,在IE10以上跟Google及火狐都能正常顯示,其實方法也不會很困難,以下為製作表格斜線的範例,大家可以參考看看。 表格結構部分 (看紅字即可) <thead> <tr> <th> <div class="slash"> <div class='slash01'>年級</div> <div class='slash02'>科別</div> </div> </th> 略............. </tr> </thead> css樣式部分 .slash{ position:relative; width:100px; height:40px; box-sizing:border-box; line-height:120px; background: linear-gradient( 135deg , transparent 49.5%, #212121 49.5%, transparent 50.5%, transparent 50.5%); } .slash01{ position: absolute; top: -50px; } .slash02{ position: absolute; top: -25px; left: 50px; } 135deg 為傾斜角度,設45deg則為則斜線會左右顛倒, #212121 為斜線的顏色,其他都設為transparent透明即可。 .slash01跟.slash02都設為absolute(浮動),顯示位置可以按實際需求調整(left and top)。 這樣至...