如何在表格单元格内创建对角线？ [英] How to create a diagonal line within a table cell?

问题描述

如何创建从任何给定单元格的左下角到右上角的对角线？

How can I create a diagonal line from the lower left corner to the upper right corner of any given cell?

获取此

<table>
    <tr>
        <td class="crossOut">A1</td>
        <td>B1</td>
    </tr>
    <tr>
        <td>A2 Wide</td>
        <td class="crossOut">B2<br/>Very<br/>Tall</td>
    </tr>
</table>

显示此

推荐答案

我不知道是否是最好的方法，但我不能这样用CSS。我的回答是在jQuery：

I don't know if is the best way, but I can't do that with CSS. My answer is in jQuery:

http：// jsfiddle .net / zw3Ve / 13 /

$(function(){
    $('.crossOut').each(function(i){
        var jTemp = $(this),
            nWidth = jTemp.innerWidth(),
            nHeight = jTemp.innerHeight(),
            sDomTemp = '<div style="position:absolute; border-color: transparent black white white; border-style:solid; border-width:'+nHeight +'px '+nWidth +'px 0px 0px; width:0; height:0; margin-top:-'+nHeight+'px; z-index:-2"></div>';

        sDomTemp += '<div style="position:absolute; border-color: transparent white white white; border-style:solid; border-width:'+nHeight +'px '+nWidth +'px 0px 0px; width:0; height:0; margin-top:-'+(nHeight-1)+'px; z-index:-1"></div>';

        jTemp.append(sDomTemp);
    });
});

或

http://jsfiddle.net/zw3Ve/16/ （使用CSS类清除）

http://jsfiddle.net/zw3Ve/16/ (with CSS class cleaner)

CSS部分：

.crossOut .child{
    position:absolute; 
    width:0; 
    height:0;
    border-style:solid;
}
.crossOut .black-triangle{
    z-index:-2;
    border-color: transparent black white white;
}
.crossOut .white-triangle{
    border-color: transparent white white white;
    z-index:-1;
}

jQuery代码：

$(function(){
    $('.crossOut').each(function(i){
        var jTemp = $(this),
            nWidth = jTemp.innerWidth(),
            nHeight = jTemp.innerHeight(),
            sDomTemp = '<div class="child black-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+nHeight+'px; "></div>';

        sDomTemp += '<div class="child white-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+(nHeight-1)+'px;"></div>';

        jTemp.append(sDomTemp);
    });
});

好处在于它适用于表格单元格的任何宽度和高度。

The good thing is it works with any width and height of a table cell.

编辑：

我对使用CSS制作的三角形的渲染质量不满意边界，所以我使用css旋转。我认为这是一个更好的工作（和线条渲染更好）：

I was not happy with the quality of rendering of triangles made ​​with CSS borders so I used the css-rotation. I think this is a better work (and the lines are render better):

http://jsfiddle.net/zw3Ve/21/

（使用 - sand-transform 用于IE6，因此它的使用是可选的。）

(Using -sand-transform is for IE6, so it use is optional.)

：
最后一个版本没有支持IE7-IE8（似乎-sand-transform只适用于CSS样式，而不适用于JavaScript编写的样式）。我制作的版本与旧版浏览器兼容：

The last version has not got support for IE7-IE8 (seems the -sand-transform only works in CSS styles and not in styles written by JavaScript). I made a version with compatibility with old browsers:

http ：//jsfiddle.net/zw3Ve/23/

这篇关于如何在表格单元格内创建对角线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！