如何在表格单元格中创建对角线？

Question

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

为了得到这个

<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>

显示这一点

Answer 1

我不知道是不是最好的方法,但我不能用CSS做到这一点.我的答案是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类清洁工)

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);
    });
});

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

编辑:

我对使用CSS边框制作的三角形的渲染质量感到不满意,所以我使用了css-rotation.我认为这是一个更好的工作(线条渲染得更好):

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

(使用-sand-transform是针对IE6的,所以使用它是可选的.)

Edit2: 最后一个版本没有IE7-IE8的支持(似乎-sand-transform仅适用于CSS样式,而不适用于JavaScript编写的样式).我创建了一个与旧浏览器兼容的版本:

http://jsfiddle.net/zw3Ve/23/

Answer 2

我找到了一个简单的,仅使用CSS的解决方案,使用线性渐变:

您可以通过定义线性渐变来简单地指定对角线.线性渐变变为几种停止颜色.开始和第二种颜色相同(=无渐变).最后一种颜色和前一种颜色相同.它们之间的颜色(约50%)用于对角线.

你可以在这里测试一下:

td
{
	border: 1pt solid black;
}

td.diagonalRising
{
	background: linear-gradient(to right bottom, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}

td.diagonalFalling
{
	background: linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}

td.diagonalCross
{
	position:   relative;
	background: linear-gradient(to right bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 49.9%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 51%,rgba(0,0,0,0) 51.1%,rgba(0,0,0,0) 100%);
}

td.diagonalCross:after
{
	content:     "";
	display:     block;
	position:    absolute;
	width:       100%;
	height:      100%;
	top:         0;
	left:        0;
	z-index:     -1;
	background:  linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}

<table>
<tr><td>a</td><td class="diagonalRising">abc</td><td class="diagonalFalling">abcdefghijklmnopqrstuvwxyz</td><td class="diagonalCross">abcdefghijklmnopqrstuvwxyz<br>qaywsxedcrfvtgbzhnujmikolp</td></tr>
</table>

不幸的是,您几乎无法指定线宽.我用Firefox,Chrome,Opera和Internet Explorer测试过它.它在所有这些中看起来都很好(但与其他IE相比,在IE中略有不同).