Create diagonal border of a cell

Question

I wonder if it is even possible creating a table with diagonal border line using css or jquery just like below:

Any ideas will be appreciated.

Answer 1

Anything is possible if you fiddle around with it long enough, here's an example using some creative borders and a lot of CSS:

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

FIDDLE

And another one using CSS3 rotate:

-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

or you could just use an image as the background for your table.

Answer 2

Officially a table cannot have diagonal borders but with little CSS tricks you can make it appear so, here's the code..

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

And here's the output.

Hope it helps.

Answer 3

table borders can't be diagonal, you just could try to use an element (div) with one border and rotate it (if css3 is ok)

Answer 4

here's an example in table with border and diagonal in 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>