jQuery 如何在表格单元格内创建对角线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8127035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a diagonal line within a table cell?
提问by Josh
How can I create a diagonal line from the lower left corner to the upper right corner of any given cell?
如何创建从任何给定单元格的左下角到右上角的对角线？
To get this
为了得到这个
<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>
to show this
显示这个
回答by Galled
I don't know if is the best way, but I can't do that with CSS. My answer is in jQuery:
我不知道这是否是最好的方法，但我不能用 CSS 做到这一点。我的答案是在 jQuery 中：
$(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);
});
});
or
或者
http://jsfiddle.net/zw3Ve/16/(with CSS class cleaner)
http://jsfiddle.net/zw3Ve/16/（带有 CSS 类清洁器）
CSS part:
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 code:
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.
好消息是它适用于表格单元格的任何宽度和高度。
Edit:
编辑：
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):
我对用 CSS 边框制作的三角形的渲染质量不满意，所以我使用了 css-rotation。我认为这是一项更好的工作（并且线条渲染得更好）：
(Using -sand-transformis for IE6, so it use is optional.)
（使用-sand-transform适用于 IE6，因此它的使用是可选的。）
Edit2: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:
Edit2：上一个版本不支持 IE7-IE8（似乎 -sand-transform 仅适用于 CSS 样式，而不适用于 JavaScript 编写的样式）。我做了一个兼容旧浏览器的版本：
回答by David Gausmann
I've found a simple, CSS-only solution using linear gradients:
我找到了一个简单的、仅使用 CSS 的线性渐变解决方案：
You can simply specify a diagonal line by defining a linear gradient. The linear gradient becomes several stop colors. The start and the second color are the same (= no gradient). The same goes for the last and the pre-last color. The colors between them (around 50 %) are used for the diagonal line.
您可以通过定义线性渐变来简单地指定对角线。线性渐变变成几种停止颜色。起始颜色和第二个颜色相同（= 无渐变）。最后一个和前最后一个颜色也是如此。它们之间的颜色（大约 50%）用于对角线。
You can test it here:
你可以在这里测试：
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>Unfortunately you can barely specify the line width. I've tested it with Firefox, Chrome, Opera and Internet Explorer. It looks ok in all of them (but slightly diffent in IE in comparison to the others).
不幸的是，您几乎无法指定线宽。我已经用 Firefox、Chrome、Opera 和 Internet Explorer 对其进行了测试。在所有这些中看起来都不错（但在 IE 中与其他人相比略有不同）。
回答by bravedick
It is possible. Try my solution:
有可能的。试试我的解决方案：
.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>
