How to make a left and right diagonal like cross line in a cell of table?

Question

I want the result Like Microsoft Excell

Answer 1

There are many options for implementing your task. One of them is pseudo-elements in absolute positioning. We stretch each pseudo-element over the entire area of ​​the parent cell and use the background property to draw a diagonal line. One pseudo-element from the upper left corner to the lower right, the second - from the lower left corner to the upper right. Regardless of the width or height of the cell - the lines will go from corner to corner. If you need the cell content to be on top of the lines, then you need to position it above the pseudo-elements using the z-index property.

HTML:

<table>
  <tr>
    <td class="cross">
      <span>Text</span>
    </td>
    <td>
      <span>Text</span>
    </td>
    <td class="cross">
      <span>Text</span>
    </td>
  </tr>
</table>

CSS:

td {
  border: 1px solid #222;
}

.cross span {
  position: relative;
  z-index: 2;
}

.cross {
  position: relative;
  width: 200px;
  height: 100px;
  text-align: center;
}

.cross:before,
.cross:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.cross:before {
  background: linear-gradient(to top right, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px) );
}

.cross:after {
  background: linear-gradient(to left top, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px) );
}

And an example:

https://codepen.io/anon/pen/WWRqra