Can cells within an HTML table be crossed out?

Question

Can cells within an HTML table be crossed out?

I have a creative idea for an HTML table - I want to be able to cross out cells in a way that looks like the following drawing:

At first, I thought about creating a CSS right triangle within the cell. But I got stuck when trying to only color the hypotenuse and not the other two sides or the entire triangle.

In simpler terms, is what I am envisioning actually achievable?
Would it be more practical to create an image with a diagonal line and then stretch it to 100% of the cell's width and height?
Thank you.

html css html-table

Answer 1

Answer №1

While this solution might seem a bit unconventional, it gets the job done. You can make use of linear-gradient

Implementing a Strikethrough Effect on Table Cells Using `background-image`

table
{
  min-width: 100%;
}

table td
{
  border: 1px solid silver;
  position: relative;
}

table td.crossed
{
   background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), red, transparent calc(50% + 1px)); 
}

<table>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
     <tr>
      <td>Content</td>
      <td class="crossed">Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Creating Strikethrough Effect in Table Cell Content Using Pseudo-Elements

If you prefer to strike through the content within each cell, you can also achieve this using pseudo-elements as shown below:

table
{
  min-width: 100%;
}

table td
{
  border: 1px solid silver;
  position: relative;
}

table td.crossed::after
{
  position: absolute;
  content: "";
  left:0;
  right:0;
  top:0;
  bottom:0;
   background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), red, transparent calc(50% + 1px)); 
}

<table>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
     <tr>
      <td>Content</td>
      <td class="crossed">Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Answer 2

While this solution might seem a bit unconventional, it gets the job done. You can make use of linear-gradient

Implementing a Strikethrough Effect on Table Cells Using `background-image`

table
{
  min-width: 100%;
}

table td
{
  border: 1px solid silver;
  position: relative;
}

table td.crossed
{
   background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), red, transparent calc(50% + 1px)); 
}

<table>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
     <tr>
      <td>Content</td>
      <td class="crossed">Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Creating Strikethrough Effect in Table Cell Content Using Pseudo-Elements

If you prefer to strike through the content within each cell, you can also achieve this using pseudo-elements as shown below:

table
{
  min-width: 100%;
}

table td
{
  border: 1px solid silver;
  position: relative;
}

table td.crossed::after
{
  position: absolute;
  content: "";
  left:0;
  right:0;
  top:0;
  bottom:0;
   background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), red, transparent calc(50% + 1px)); 
}

<table>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
     <tr>
      <td>Content</td>
      <td class="crossed">Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

Answer 3

Answer №2

 <style>
td.slantingRising
{
   background: linear-gradient(to bottom right, #ffffff 0%,#ffffff     
   49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}

td.slantingFalling
{
  background: linear-gradient(to top right, #fff 0%,#fff 49.9%,#000000    
 50%,#000000 51%,#fff 51.1%,#fff 100%);
}
<style>

For more detailed information, please click on the provided link above. This also includes support for all directions such as vertical, horizontal, or diagonal.

Answer 4

 <style>
td.slantingRising
{
   background: linear-gradient(to bottom right, #ffffff 0%,#ffffff     
   49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}

td.slantingFalling
{
  background: linear-gradient(to top right, #fff 0%,#fff 49.9%,#000000    
 50%,#000000 51%,#fff 51.1%,#fff 100%);
}
<style>

For more detailed information, please click on the provided link above. This also includes support for all directions such as vertical, horizontal, or diagonal.

Answer 5

Answer №3

I was wondering, have you ever considered using

backgroundImage: 'linear(to bottom right, black)'

in the react style property instead?

Answer 6

I was wondering, have you ever considered using

backgroundImage: 'linear(to bottom right, black)'

in the react style property instead?

Can cells within an HTML table be crossed out?

Answer №1

Implementing a Strikethrough Effect on Table Cells Using `background-image`

Creating Strikethrough Effect in Table Cell Content Using Pseudo-Elements

Answer №2

Answer №3

Similar questions

Using MySQL data in an EJS file to create a personalized Profile Page

Animating SVGs in Internet Explorer (IE)

How to use jQuery to iterate over changing elements and retrieve their data values

Deactivate a chosen item following selection

How to position Angular Material menu on the right side

Is there a way to transfer controller scope to a partial HTML file?

Is it possible for me to retrieve/load a <datalist> element from a different file?

Executing a function in JQuery with care

Ways to fix text overlap in a pill

The website on iPad automatically zooms in upon opening and then increases the zoom level even further when a specific button is tapped

Using AngularJS to incorporate ng-include with ng-click functionality

Resizing Image-maps and images on the fly with maphilight.min.js

What is the best way to combine items from two separate lists into a single list by simply clicking on the items using JavaScript and PHP?

Display content from an external HTML page within a div using Ionic

Implementing the class "col-xxl" is creating additional padding within the fluid container in Bootstrap

Managing numerous range sliders in a Django form

Is it advisable to hold off until the document.onload event occurs?

What might be causing issues with the functionality of my user registration form?

Using Ajax to make a request on the same page but specifically within a column

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript

Can cells within an HTML table be crossed out?

Answer №1

Implementing a Strikethrough Effect on Table Cells Using background-image

Creating Strikethrough Effect in Table Cell Content Using Pseudo-Elements

Answer №2

Answer №3

Similar questions

Using MySQL data in an EJS file to create a personalized Profile Page

Animating SVGs in Internet Explorer (IE)

How to use jQuery to iterate over changing elements and retrieve their data values

Deactivate a chosen item following selection

How to position Angular Material menu on the right side

Is there a way to transfer controller scope to a partial HTML file?

Is it possible for me to retrieve/load a <datalist> element from a different file?

Executing a function in JQuery with care

Ways to fix text overlap in a pill

The website on iPad automatically zooms in upon opening and then increases the zoom level even further when a specific button is tapped

Using AngularJS to incorporate ng-include with ng-click functionality

Resizing Image-maps and images on the fly with maphilight.min.js

What is the best way to combine items from two separate lists into a single list by simply clicking on the items using JavaScript and PHP?

Display content from an external HTML page within a div using Ionic

Implementing the class "col-xxl" is creating additional padding within the fluid container in Bootstrap

Managing numerous range sliders in a Django form

Is it advisable to hold off until the document.onload event occurs?

What might be causing issues with the functionality of my user registration form?

Using Ajax to make a request on the same page but specifically within a column

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript

Implementing a Strikethrough Effect on Table Cells Using `background-image`