Issue with background color not showing up in blank cells of a table

I am working with a table that has alternating gray background colors for every second row. However, I'm having trouble capturing the empty cells. Even though I have applied CSS to target every even row, the empty cells are not being affected. Here is the code snippet in question:

tr:nth-child(even) {
  background-color: #dddddd; 
}

I have tried using `td:empty` but it doesn't seem to work either. I'm a bit confused as to why this is happening.

Below is the HTML code:

      <td>
        <tr>
          <td colspan="2">
            <input type="text" placeholder="Add new email" v-model="email" />
            <img @click="addEmailToQ" src="@/assets/Plus.png" />
          </td>
        </tr>
        <!-- <h2>Emails</h2> -->
        <tr style="text-align: left" v-for="(email, key) in emailList" :key="key">
          {{email}}
        </tr>
      </td>

Answer №1

Concerning the "issue" you encountered, it is not related to CSS but rather incorrect markup structure. The <tr> elements should contain <td> elements, not the other way around.

To learn more about HTML Tables, you can check out this resource: https://www.w3schools.com/html/html_tables.asp

Below is a snippet of code showcasing how empty cells can have a specific background color with the correct markup and CSS styling:

table {
  width:100%;
}

tr:nth-child(even) {
  background-color: #dddddd; 
}
<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer №2

Ensure every cell includes the <td> tag, even if it's empty like <td> </td>

tr:nth-child(even) {
        background-color: #dddddd;
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
      <tr>
        <td></td>
        <td>Smith</td>
        <td></td>
      </tr>
      <tr>
        <td>Eve</td>
        <td></td>
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td></td>
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td></td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td></td>
        <td>94</td>
      </tr>
    </table>
  </body>
</html>

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

A beginner's guide to checking the functionality of individual Vue components

I'm looking to implement ava for conducting unit tests on my Vue components. Currently, I have a basic setup in place: package.json { "name": "vue-testing", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { ...

In the ajax success function, it is not possible to modify the text

Having a puzzling issue here - I can't seem to update the value of a button within an ajax post success callback. Although the alert is being displayed meaning that the callback is definitely running. Just to clarify, these buttons are not being dynam ...

Aligning dynamic width columns in Bootstrap 4 with Internet Explorer

I'm facing an issue with Bootstrap 4 columns in a row, where I have variable widths on the columns causing slight discrepancies in how they are displayed. While Chrome handles this well, Internet Explorer seems to align the last two columns based on " ...

Selenium does not return any results when invoking an xpath

I am attempting to extract the address, but I am receiving a "none" value. Can someone please help me identify my mistake in the XPath? Kindly guide us through it, here is the link to the page: https://i.sstatic.net/CnvM2.png Here is the code snippet: im ...

Angular JS allows for the display of text from a textarea upon clicking the submit button

Q] How can I display a single text message from a textarea upon clicking the submit button in angular-js? Here is the current code that I have: <html ng-app="myApp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1 ...

Utilizing Vue to properly reference asset paths for background URLs

I recently developed a Vue application and I am currently trying to display an image as a background in a div element. I have found that using the following code snippet accomplishes this: background: url('~../assets/my_image.png'); However, I a ...

Having trouble getting JavaScript validation to function properly

I'm struggling to make validation work properly when hitting the submit button. No alert messages appear, even though I should be receiving alerts for empty fields. Can someone identify what is wrong with my code? I have tried checking the validation ...

Tips for dynamically filling HTML content with Ajax calls

I'm currently in the process of creating a website for my semester project, and I need to dynamically populate HTML content from an AJAX response. The data I'm receiving is related to posts from a database, but I specifically need to display 5 jo ...

Updating Vue.js asynchronously using JavaScript import

I am facing a challenge with two form components that share a common JS validator. import { validateInput } from './validateInput.js' export default { data () { return { email: '<a href="/cdn-cgi/l/email-protection" class="_ ...

Creating void placeholders in a repeated loop

Suppose we have the data array stored in "$my_array". Below is an example of the expected output based on this data. Please note that due to restrictions, I am unable to modify the way data is inserted into the database. Hence, I need to create empty colu ...

Struggling to implement Bootstrap grid in a Rails project

I'm encountering a problem similar to what was discussed in Issue with Bootstrap grid in Rails (and other related threads), but the suggested solution isn't resolving my issue. Despite using Bootstrap 3 classes with the Bootstrap 3 gem, I'm ...

Leveraging Columns in HTML and CSS

Looking to create a layout with 2 separate columns for the content on my website. The desired layout is shown below: https://i.stack.imgur.com/V4uX2.jpg On my computer monitor, it displays as intended. However, on my mobile device it appears like this: ...

Unable to retrieve request form from the HTML form

I've encountered an issue with a form I have where the submitted data can't be read when trying to process it. Here is the form in question: <form id="form1" action="page.aspx" method="get"> <input type="text" name="idP" id="idP" ...

Rotational transformation in CSS not displaying in Webkit / iPhone browsers, yet functioning properly in Chrome Devtools device toolbar

tl;dr: My CSS transform rotate is not rendering on Webkit / iPhone, but it works in Chrome Devtools device toolbar. Update: I've also opened a separate GitHub issue that is more concise and easier to read, without code excerpts, here. Giving some co ...

Internet Explorer 11 Freezes Unexpectedly with Dynamic SVG Components

Lately, I developed a unique SVG Icon control for the new html application at my workplace. However, our quality department started noticing that IE 11 would intermittently "crash" while using the application after its implementation. I'm not convinc ...

What could be causing the images to not display on my HTML page?

My program is designed to display an image based on the result of the random function. Here is my HTML: <div> <h2>Player 0:</h2> <div id="MainPlayer0"></div> </div> Next, in my TypeScript fi ...

Is it possible to modify the background color of a live bootstrap dropdown component?

Looking to jazz up your bootstrap navbar? Check out the code below and see how you can change the color (blue) when an item is clicked and active: https://i.sstatic.net/iPp1W.gif I've tried a bunch of different methods, but none seem to be working ...

Is there a way to position the weather icon beside the weather condition?

My icon is hanging low on the left corner of the screen. I'm looking for a quick way to move it next to the weather condition (right below Your Location). Access Codepen link <div class="container"> <h1 class=" text-center"> Your Loc ...

firefox compatibility issues with jquery ajax

Trying to establish a connection with a URL and expecting a large object in response has proven to be challenging. The process appears to function smoothly until an error occurs during the return reply, triggering the .ajax.error() function. Unfortunately, ...

A chart using JavaScript that displays text values instead of a traditional website

I am a student with no background in programming, however, for my project I need to create a chart based on values from a txt file to display sensor data. I came across a chart that retrieves its values from a website, but I would like to modify it so it c ...