2022-08-18

【CSS】表格內畫斜線

參考資料 ----

老人家對 CSS 不熟，也聽說時下表格的主流做法也是以 CSS 設計，但工作需要，只能急就章，日後再優化吧...
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
/* 左上右下斜線 */
.slashTL2BR {
  background: linear-gradient(to top right, #fff calc(50% - 1px), black , #fff calc(50% + 1px) )
}

/* 左下右上斜線 */
.slashBL2TR {
  background: linear-gradient(to bottom right, #fff calc(50% - 1px), black , #fff calc(50% + 1px) )
}
</style>
</head>
<body>
    <table border="1">
        <tr>
            <td class="slashTL2BR">
                <table border='0' width='100%'>
                    <tr><td align="right">　　　　左上右下</td></tr> <!-- 以全形空白加大單一格子寬度 -->
                    <tr><td>表格內斜線</td></tr>
                </table>
            </td>
        </tr>
        <tr>
        </tr>
        <tr>
            <td rowspan='2' class="slashBL2TR">
                <table border='0' width='100%'>
                    <tr><td>左下右上</td></tr>
                    <tr><td align="right">表格內斜線</td></tr>
                </table>
            </td>
        </tr>
        <tr>
        </tr>
    </table>
</body>
</html>
 



Labels: ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)