Jquery 创建单元格的对角边框

我想知道是否有可能使用css或jquery创建一个带有对角线边框的表，如下所示：

---

任何想法都会受到欢迎。

表格边框不能是对角的，您可以尝试使用一个带有一个边框的元素（div）并旋转它（如果css3可以）

如果您长时间摆弄它，任何事情都是可能的，下面是一个使用一些创造性边框和大量CSS的示例：

.arrow_box:after, .arrow_box:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

另一个使用CSS3旋转：

-webkit-transform: rotate(26.5deg);
   -moz-transform: rotate(26.5deg);
    -ms-transform: rotate(26.5deg);
     -o-transform: rotate(26.5deg);
        transform: rotate(26.5deg);

---

或者，您可以使用图像作为表格的背景。

正式来说，表格不能有对角边框，但通过一些CSS技巧，您可以使其看起来如此， 这是密码

.borderdraw {
position:fixed;
    border-style:solid;
    height:0;
    line-height:0;
    width:0;
    z-index:-1;

}

table td
    { 
        width:60px; 
            max-height:55px; 
        border:1px solid #000;
    }

.tag1{ z-index:9999;position:absolute;top:40px; }

.tag2 { z-index:9999;position:absolute;left:40px; }

.diag { position: relative; width: 50px; height: 50px; }
.outerdivslant { position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 50px 0px 0px 60px;}
.innerdivslant {position: absolute; top: 1px; left: 0px; border-color: transparent transparent transparent #fff; border-width: 49px 0px 0px 59px;}                  
</style>

.borderdraw{
位置：固定；
边框样式：实心；
身高：0；
线高：0；
宽度：0；
z指数：-1；
}
表td
{ 
宽度：60px；
最大高度：55px；
边框：1px实心#000；
}
.tag1{z-index:9999；位置：绝对；顶部：40px；}
.tag2{z-index:9999；位置：绝对；左：40px；}
.diag{位置：相对；宽度：50px；高度：50px；}
.outerDivLant{位置：绝对；顶部：0px；左侧：0px；边框颜色：透明rgb（64,0,0）；边框宽度：50px 0px 0px 60px；}
.InnerDivSland{位置：绝对；顶部：1px；左侧：0px；边框颜色：透明#fff；边框宽度：49px 0px 0px 59px；}

---

Tag1
Tag2

这是输出

---

希望对您有所帮助。

下面是一个在css中带有边框和对角线的表格示例

表格{
宽度：100%；
}
表td{
位置：相对位置；
溢出：隐藏；
边框：1px实心#000；
}
.线路{
位置：绝对位置；
高度：40px；
顶部：40px；
底部：0；
保证金：自动；
左：-5px；
宽度：100%；
边框顶部：1px实心#000；
-webkit变换：旋转（14度）；
-ms变换：旋转（14度）；
变换：旋转（14度）；
}
.对角线{
宽度：150px；
高度：40px；
}
.对角线跨度.lb{
位置：绝对位置；
底部：2px；
左：2px；
}
.对角线跨度.rt{
位置：绝对位置；
顶部：2个；
右：2px；
}

abc
abc
拉塔-拉塔
全部的
abc
abc
abc
abc
abc
abc

好的，看起来不错。但实际上，这应该以某种方式与文本一起使用（房间类型、招待）它应该与IE浏览器一起正常工作。如何在表中而不是在div中应用此功能？关键是，要做到这一点，没有简单的跨浏览器方法，您需要做大量工作才能使其满足您的需要。唯一简单的解决方法是使用图像作为背景。谢谢adeneo。最后，我用图像表示对角线，用带倒钩位置的div表示酒店和房间类型标签。在第二个示例中，旋转后如何计算位置？我的意思是线的位置是

top:190px；左：33像素。我只是匆匆创建了它，您可以根据需要随时格式化它。这是实现这种风格的方法之一。
  <table>
    <tr>
      <td> 
    <div class = "tag1">Tag1</div>
    <div class="tag2">Tag2</div>

        <div style="z-index:-1;">
           <div class="diag">
             <div class="outerdivslant borderdraw">
             </div>

           <div class = "innerdivslant borderdraw">
           </div>
         </div>
        </div>

      </td>
    </tr>
</table>