對(duì)于table css 斜線的實(shí)現(xiàn),我們可以利用CSS偽元素的方式來達(dá)到效果。
table { position: relative; border-collapse: collapse; } table td { border: 1px solid black; padding: 10px; } /* 定義斜線偽元素 */ table td:before { content: ''; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; border: 1px solid black; transform: rotate(-45deg); }
上述代碼中,我們首先將table元素設(shè)置為相對(duì)定位,并將其邊框合并。
接著,我們?cè)O(shè)置表格單元格td的邊框和內(nèi)邊距。
最后,我們利用before偽元素生成斜線,并將其絕對(duì)定位到單元格的左上角,設(shè)置它的寬和高都為100%(即和單元格大小相同),邊框?yàn)?px,旋轉(zhuǎn)角度為-45度(即從左上角到右下角)。
這樣一來,我們就可以實(shí)現(xiàn)table css 斜線的效果。