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 03px,#00006px);
}
<!DOCTYPE html><html><head><linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"rel="stylesheet" /></head><body><tableclass="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>') 00/8px12px;
}
<!DOCTYPE html><html><head><linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"rel="stylesheet" /></head><body><tableclass="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><linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"rel="stylesheet" /></head><body><tableclass="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"