jquery - 创建单元格的对角线边框

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

小提琴

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

小提琴

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

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>