Как создать диагональную линию внутри ячейки таблицы?

Ответ 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);
    });
});

Хорошо, что он работает с любой шириной и высотой ячейки таблицы.

Edit:

Я был недоволен качеством рендеринга треугольников с границами CSS, поэтому я использовал css-rotation. Я думаю, что это лучшая работа (и линии оказываются лучше):

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

(Использование -sand-transform для IE6, поэтому использование необязательно.)

Edit2: Последняя версия не получила поддержки IE7-IE8 (кажется, что -sand-transform работает только в стилях CSS, а не в стилях, написанных JavaScript). Я сделал версию с совместимостью со старыми браузерами:

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

Ответ 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>

Ответ 3

Это возможно. Попробуйте мое решение:

.line {
    width: 200px;
    height: 50px;
    border: 1px solid #cccccc;
    margin: 10px;
    padding: 10px;
    position: relative;
}

.me {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}


<div class="line">LINE!
     <img src="http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png" class="me" />
</div>