crossed out vaadin stripe

Is there a way to make an entire row in a table appear crossed out? I attempted using the text-decoration property, but it only impacted the text itself.

.v-table-row.v-table-row-highlight-red,
.v-table-row-odd.v-table-row-highlight-red {
  background-color: #ff0000;
  white-space: pre-wrap !important;
  text-decoration: line-through;
}

Any suggestions on how to strike through the complete row?

Currently, my table code generator is configured as follows:

table.setCellStyleGenerator((source, itemId, propertyId) - > {
  return "highlight-red";
});

Answer №1

If you're looking to achieve a cross line effect in an unconventional way, there is a workaround that involves using the box-shadow property on a before pseudo element.

Here's how you can implement it:

table {
  border-spacing: 0;
}

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

tr.deleted td:before {
  content: "";
  box-shadow: 0 0 0 1px #000;
  width: 100%;
  position: absolute;
  top: 50%;
}
<table>
  <tr class="deleted">
    <td>
      deleted row
    </td>
     <td>
      deleted row
    </td>
     <td>
      deleted row
    </td>
     <td>
      deleted row
    </td>
  </tr>
  <tr>
    <td>
      regular row
    </td>
     <td>
      regular row
    </td>
     <td>
      regular row
    </td>
     <td>
      regular row
    </td>
  </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Rendering of @font-face on Windows 7 was executed flawlessly

I have been utilizing @font-face to implement custom fonts on a website. The custom font displays correctly in Firefox, IE, Safari, and Chrome on Mac. However, when viewed on Chrome in Windows 7, the text appears green at 10px instead of black or grey. ... ...

Background Image Will Not Expand

After searching for a solution on how to stretch the background image in HTML for this specific section of my website, I came across this code. However, despite implementing it, the desired effect is not being achieved. Can anyone spot what mistake I may ...

Using Javascript or jQuery to Enhance the Appearance of Text on a Website

Is there a way to automatically apply styling to specific phrases on our website by searching for instances of those phrases? For example: <div> This is what you get from <span class="comp">Company Name</span>. We do all kin ...

Include a URL parameter in the CSS file within the ASP themes directory

I recently developed a code snippet for versioning JavaScript files by appending the file path with an md5 hash. Here's an example: <script src="../Javascript/Navigation.js" type="text/javascript"></script> which transforms into: <sc ...

Utilize various CSS styles for individual sections within a multi-page website

Having a web page with multiple subpages each having their own specific CSS can be quite challenging. Sometimes, when all the CSS files are applied globally, they tend to mix with each other causing a headache for developers. One common approach is to decl ...

The issue with jQuery click function seems to be limited to Firefox

After a long hiatus from posting here, I hope this isn't breaking any rules. For those who prefer visual examples, you can visit the live page at: The drop-down menu functions perfectly in IE, Chrome, and Safari, but seems to be causing issues in Fir ...

Discovering distinct colors for this loading dots script

Looking for assistance with a 10 loading dots animation script. I'm trying to customize the color of each dot individually, but when I create separate divs for each dot and control their colors in CSS, it causes issues with the animation. If anyone ...

You cannot use css() in conjunction with appendTo()

$('#item').click(function() { $.ajax({ url: 'server.php', type: 'POST', data : {temp : 'aValue'}, success: function(data) { $(data).css('color&apo ...

Items in a pair of distinct columns

I want to enhance a picture by adding three paragraphs on the left-hand side. Below is my HTML code: <md-toolbar layout-align="center center"> <h3>Traffic Light Component</h3> </md-toolbar> <md-grid-list md-cols ...

There seems to be an issue with the functionality of the operators in the Calculator Javascript

I'm currently working on a Javascript calculator project for FreeCodeCamp and encountering an issue with the code. Whenever I input an operator like "-", "+", "x", etc., the numbers in the history section start repeating themselves. For example, if I ...

Page elements subtly move when reloading in Chrome

I am experiencing an issue with a div that has left and top offsets randomly selected from an array of values upon page load. Most of the time, it works fine. However, occasionally, upon refreshing the page, the window scrolls down slightly, revealing the ...

Activate the Scrolling Feature in Angular Version 7

I am facing an issue with Angular 7 where scrolling is disabled for some unknown reason. I am not sure if this problem is related to using router-outlet or something I have implemented in the CSS. Below, I am sharing the code for one of my components. All ...

The font size appears significantly smaller than expected when using wkhtmltoimage to render

I am trying to convert text into an image, with a static layout and size while adjusting the font size based on the amount of text. I prefer using wkhtmltoimage 0.12.5 as it offers various CSS styling options. Currently, I am working on a Mac. Below is a ...

What is the best way to display lengthy content using a pair of HTML tags?

I am facing an issue with my Angular4 app where I have a <md-card-content> tag on part of my page. Inside this tag, I am trying to display some content within a <p> tag which has a maximum height of 20cm. While this setup works fine for short ...

The magic of CSS table manipulation

I'm having trouble with the nth-child selector to control the display of table 2. Specifically, I want to show only rows 11-20 in table 2 but I can't seem to get it right. Any suggestions? Currently, Table 1 is displaying rows 1-10 correctly. Ta ...

Tips for properly placing a Bootstrap4 card inside a designated container

I've been struggling to make a Bootstrap card fit perfectly within a container that has a fixed height. I've tried using the typical rules like max-height, but nothing seems to be working. Check out this jsfiddle for reference: https://jsfiddle. ...

Setting the path to an image component using the style jsx tag in Next.js: A step-by-step guide

While utilizing jsx to define styles for my NextJs components, I am facing the challenge of defining a background image for certain elements. I have realized that only relative paths or absolute paths are accepted. But how can I pass a relative path to th ...

How to stylishly showcase a list in a horizontal row using HTML and CSS`

Is there a way to modify this code so that the list is displayed in a horizontal line menu? Currently, the code displays the list vertically but I want it to be displayed in a horizontal line. How can I achieve this? <html><head><style> ...

I am struggling to run the jQuery animation that adjusts the width more than once

My goal is to allow the user to expand and retract a <div> element upon clicking. The desired behavior is for the <div> to expand when clicked, and then retract back to its original width when clicked again. However, when testing this function ...

What could be causing the slider to have a choppy transition between images?

The Issue: Looking at this GIF, you can see that the image transitions are not seamless. The slider is built on Bootstrap. I am also trying to ensure that the slider's body does not always adjust to the new image but maintains a minimum size. I have ...