Skip to content Skip to sidebar Skip to footer
Home / Bootstrap 4 / Css / Html

Display Lines Instead Of Empty Cells In Html Table

Post a Comment
I need to display something like the following picture in the empty cells of an html table (I'm using Bootstrap 4.3.1) Source code: Expected result: Thank you in advance.

Solution 1:

Use a gradient background combined with :empty

td:empty {
  background:repeating-linear-gradient(-45deg, transparent 0 3px,#000 0 6px);
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<table class="table table-bordered">
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td></td>
  </tr>
</table>

</body>
</html>

An SVG if you want better rendering.

td:empty {
  background:
   url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="2 0 2 3"><line x1="0" y1="5" x2="4" y2="-1" stroke="black"></line><line x1="2" y1="5" x2="6" y2="-1" stroke="black"></line></svg>') 0 0/8px 12px;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<table class="table table-bordered">
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td></td>
  </tr>
</table>

</body>
</html>

Solution 2:

you can use :empty

td:empty{
  background:red;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

<table class="table table-bordered">
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>Lois</td>
  </tr>
</table>

</body>
</html>

Post a Comment for "Display Lines Instead Of Empty Cells In Html Table"