创建单元格的对角线边框

Question

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

任何想法都将受到赞赏。

Answer 1

如果你用足够长的时间做任何事都是可能的，这是一个使用一些创意边框和大量CSS的例子：

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

FIDDLE

另一个使用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);

FIDDLE

或者您可以使用图片作为桌子的背景。

Answer 2

正式表格不能有对角线边框，但只有很少的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>

---

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

这是输出。

希望它有所帮助。

Answer 3

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

Answer 4

这是表中带有CSS中的边框和对角线的示例 https://codepen.io/halimarm/pen/rNaPyGR?editors=1100

table {
  width: 100%;
}

table td {
  position: relative;
  overflow: hidden;
  border: 1px solid #000;
}

.line {
  position: absolute;
  height: 40px;
  top: 40px;
  bottom: 0;
  margin: auto;
  left: -5px;
  width: 100%;
  border-top: 1px solid #000;
  -webkit-transform: rotate(14deg);
  -ms-transform: rotate(14deg);
  transform: rotate(14deg); 
}

.diagonal {
  width: 150px;
  height: 40px;
}
.diagonal span.lb {
  position: absolute;
  bottom: 2px;
  left: 2px;
}
.diagonal span.rt {
  position: absolute;
  top: 2px;
  right: 2px;
}

<table>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td class="diagonal">
      <span class="lb">Rata - Rata</span>
      <span class="rt">Total</span>
      <div class="line"></div>
    </td>
  </tr>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
  </tr>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
  </tr>
</table>