Slanted diagonal line in html or css?

Question

I want to make a Table like this

is it possible to add a slanted diagonal border in table?

Answer 1

Another approach would be to use SVG as it can scale easily to the size of your container.

Example :

div {
  position: relative;
  display:inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid #000;
}
.l{width:200px;}
.xl{width:300px;}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="s">
  <svg viewBox="0 0 10 10" preserveAspectRatio="none">
    <line x1="0" y1="0" x2="10" y2="10" stroke="black" stroke-width="0.2" />
  </svg>
</div>
<div class="l">
  <svg viewBox="0 0 10 10" preserveAspectRatio="none">
    <line x1="0" y1="0" x2="10" y2="10" stroke="black" stroke-width="0.2" />
  </svg>
</div>
<div class="xl">
  <svg viewBox="0 0 10 10" preserveAspectRatio="none">
    <line x1="0" y1="0" x2="10" y2="10" stroke="black" stroke-width="0.2" />
  </svg>
</div>