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.

Thaine

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.

Nonconcurrence

Ok, looks good. But in reality this should be used with the text somehow (Room type, Hospitality). + it should properly work with IE browser. – Sechrist

How to apply this in a table instead of div? – Convertible

The point being, there is no easy cross-browser works everywhere way to do this, it will take a lot of work on your part to make it fit your needs. The only easy solution is to use an image as background. – Nonconcurrence

Thanks adeneo. In the end, I use image for the diagonal line and div with absulute position for Hospitality and Room Type label. – Thaine

In your second example, how did you calculate position after rotation? I mean Line position is top: 190px; left: 33px; . – Durno

@Durno - three years later, I'm not really sure, can't remember, but I'm guessing it was just trial and error. – Nonconcurrence

@adeneo, thanks, I tried to find an equation to do it but failed, I set anchor point to zero, and rotate a thin line instead of a rectangle. – Durno

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.

Bozeman

I just created that in a hurry, You can always format that according to your needs. That was one of the way's the style could be acheived. – Bozeman

Answer 3

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>

Hellfire

Answer 4

Solution with CSS linear-gradient for diagonal line and CSS transform for positioning internal cells:

td {
    padding: 30px;
    border: 2px solid black;
    background-image: -webkit-gradient(linear, left bottom, right top, color-stop(49%, white), color-stop(50%, black), color-stop(51%, white));
    background-image: -webkit-linear-gradient(bottom left, white 49%, black 50%, white 51%);
    background-image: -o-linear-gradient(bottom left, white 49%, black 50%, white 51%);
    background-image: linear-gradient(to top right, white 49%, black 50%, white 51%);
}
td .c1 {
    -webkit-transform: translate(20px,-20px);
        -ms-transform: translate(20px,-20px);
            transform: translate(20px,-20px);
}
td .c2 {
    -webkit-transform: translate(-20px,20px);
        -ms-transform: translate(-20px,20px);
            transform: translate(-20px,20px);
}

<table border=1>
  <tr>
    <td>
      <div class="c1">Foo</div>
      <div class="c2">Bar</div>
    </td>
  </tr>
</table>

Or solution^{by Peter Krautzberger} with CSS background: url(...) SVG image for diagonal line and CSS Grid Layout for positioning internal cells:

.cell {
  display: grid;
  width: max-content;
  justify-content: space-between;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  border: 1px solid #000;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/></svg>");
  background-size: 100% 100%;
}

.cell--topRight {
  grid-column-start: 2;
  text-align: right;
}

.cell--bottomLeft {
  grid-column-start: 1;
}

<table border=1>
  <tr>
    <td class=cell>
      <div class="cell--topRight">Foo</div>
      <div class="cell--bottomLeft">Bar</div>
    </td>
  </tr>
</table>

Necklace

The SVG version is rendered smoother, but both solutions are good and independent of the cell's aspect ratio. – Ontology

Answer 5

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)

Eleneeleni