The CSS table is not displaying the border on the last td when using the nthchild() function

My goal is to display the table td's with alternating borders - one with a border and one without on the bottom. Everything seems to be working fine except for the last td of the table, where the border-bottom does not appear.

Additionally, the issue doesn't seem to be affecting Internet Explorer at all:

.moduletablehome table tbody tr td:nth-child(odd) {
    margin: 4px;
    padding: 4px;
    border-right: 1px solid;
    border-bottom: 1px dotted;
    overflow: hidden;
}
.moduletablehome table tbody tr td:nth-child(even) {
    margin: 4px;
    padding: 4px;
    border-bottom: 1px dotted;
    overflow: hidden;
}

For reference, here is a jsfiddle link: jsfiddle.net/EC6dW/2.

Answer №1

To ensure compatibility with Internet Explorer, it's necessary to incorporate Javascript or JQuery.

For a comprehensive guide on this topic, check out this tutorial at

Answer №2

I am attempting to display the table td's with one having a border and the other without a border at the bottom.

It seems that your code currently sets the bottom border for both cases, so I am unsure if this is the desired outcome? The odd and even cases appear to differ in terms of border-right, so perhaps you intended to switch around border-bottom and border-right?.

I have simplified your jsfiddle to what I believe is the essential content: http://jsfiddle.net/EC6dW/5/ and observed the expected result from your css. (I modified the even tds to utilize border-bottom: 1px dotted as per your question rather than 1px solid as seen in the jsfiddle).

Answer №3

After much trial and error, I've finally found the solution!

I decided to add a dashed border-bottom to the tr element.

Additionally, I removed the border-bottom from both td elements for a cleaner look.

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

Header Logo not Displaying on _Layout.cshtml in ASP.NET Core

Currently working on a project in Asp Net Core 6 with an application that consists of 2 areas. One issue I encountered is that when logging in with the default user, images display correctly. However, once the address bar changes to localhost:44316/Admin ...

Font compatibility issue in email template on mobile devices

When I send out my email template, Agency FB font displays correctly in the desktop view, but reverts back to PT-sans in device view. I've ensured that the font family is set to Agency FB and included the URL link. My emails are sent using MailChimp. ...

What is the method to dynamically modify the value of location.href using vanilla javascript?

I have a button that looks like this: <button type="button" class="play-now-button" onclick="location.href='www.yahoo.com'">Play Now</button> However, I want to change the location.href value using vanilla JavaScript. The code below ...

Optimal middle row height for Twitter-Bootstrap grid system

Hello, I go by the name of Shohel Rana. For quite some time now, I've been grappling with a persistent issue that seems to have no clear solution. The crux of the problem is as follows: I have three rows in this setup. The first and third rows sh ...

Steps to resolve background image problems

Currently encountering issues with the application where the background image is not showing up behind the login form. This problem arises while using a bootstrap template for the website. Attempted to set the background image in the .main-content div with ...

What is the best way to incorporate animation using Tailwind CSS within my Next.js project?

I have a challenge with placing three images in a circular path one after the other using Tailwind CSS for styling. I've identified the circular path and keyframe style for the images. How do I configure this style in my Tailwind config file and imple ...

Reorder a specific character within an array using Javascript

I am a beginner in JavaScript and I'm hoping for some assistance. I have an HTML list with a select option, and I want to sort the list based on the selected character. Specifically, I would like to arrange the "Z" options first, followed by the "B" ...

Stylesheet for a React component

Why is the CSS code in my React component file not working even though I have imported it? import React from 'react'; import { Carousel } from 'react-bootstrap'; import './Banner'; ...

Arranging Divs with Right Float Alignment

I am running into issues trying to align and float certain divs properly. Currently, I have two divs with images that are displaying correctly, and now I need to add two more divs with images that behave in the same way. Even though I attempted to use th ...

Scrollbar Overlay

I am currently working on an HTML page where I have implemented a CSS style overlay lightbox effect using CSS and jQuery. If you want to take a look at the code, click here One issue I am facing is that when I resize the window height so the right-hand s ...

Whenever I try to include something within the `componentWillUnmount` function,

I'm currently learning React on my own. I've been trying to save session data in my componentWillUnmount method. However, when I add code inside componentWillUnmount, nothing seems to happen. I tried debugging by adding console logs and debugger ...

Tips on incorporating a high-quality animated gif for optimal user engagement

I'm looking for advice on how to optimize the loading of a large animated gif (1900px wide) on my website. Currently, the initial load time is quite lengthy and the animation appears choppy. Is there a more efficient method to load the gif without slo ...

Adjust size of item within grid component in VueJS

I have a grid container with cells and a draggable item in a Vue project. I am trying to figure out how to resize the box inside the grid component (refer to images). https://i.stack.imgur.com/q4MKZ.png This is my current grid setup, and I would like the ...

Looking to retrieve the value of an input element within an ng-select in Angular 6?

Currently, I am working on a project where I aim to develop a customized feature in ng-select. This feature will enable the text entered in ng-select to be appended to the binding item and included as part of the multiselect function. If you want to see a ...

Splitting up website content dynamically across various pages

I am interested in developing a webpage that showcases different versions of my code in a tabular format, arranged in reverse chronological order. An example of how I want it to look is provided below. Number Release Date End Date Requires ...

Employing the include functionality within PHP

Currently, I am in the process of developing an eCommerce website and have my own host/domain. To ensure security, I understand that it is advisable to store PHP files in a location separate from public_html. The index.html file is located in /home/user/pu ...

AngularJs and graph representation

After attempting to generate charts using angular-chart, I followed all the necessary steps and requirements outlined in the documentation. However, upon completion, my canvas element failed to display any content. My HTML Layout: Here is a snippet of my ...

Adding several <div> elements with the correct indices

I need help with a dynamic form that requires users to select a state before revealing the corresponding cities within that state. <form method="post"> <div class="summary"> <div class="trip"> <select name="State" class="s ...

What is the reason that <span> elements do not automatically wrap around to the next line when they are in line with each other without any white space?

Once upon a time, I believed that line breaks had no impact on the rendering of HTML due to minification. However, I recently discovered something peculiar. <!DOCTYPE html> <html> <body> <style> div { width: 200px; background: ...

The collapsible HTML menu is malfunctioning

Can anyone assist me? I'm having trouble with the collapsible menu on my website not showing all three lists when clicked. I am using the following script link: src="http://code.jquey.com/jquery-1.11.2.min.js", or perhaps I have linked it incorrectly ...