Concealing unnecessary borders on list elements using jQuery

Here is the code I am working with: http://jsfiddle.net/eLyJA/

I am looking to calculate and eliminate all border edges to achieve this visual effect:

Answer â„–1

Update: I stumbled upon a clever workaround that allows the solution to function smoothly across various web browsers, including older versions of IE.

DEMO: http://jsfiddle.net/n1ck/p3SCR/4/

In addition to my initial solution, I included the following code:

table {
    border-color:transparent; 
    border-style:solid; 
}

table td {
    border: 1px solid black;
}

There are two ways to achieve this effect in CSS:

http://jsfiddle.net/eLyJA/3/

table {
    border-collapse: collapse;
}
table td {
    padding:80px;
    border: 1px solid black;
}
table tr:first-child td {
    border-top: 0;
}
table tr:last-child td {
    border-bottom: 0;
}
table tr td:first-child{
    border-left: 0;
}
table tr td:last-child,
    border-right: 0;
}​

Alternatively, you can achieve the desired result by setting the table frame="void"

http://jsfiddle.net/eLyJA/7/

<table border="1" frame="void">

Answer â„–2

Employed a for loop to accomplish this task: http://jsfiddle.net/eLyJA/15/

var total = $("ul li").size();

$().ready(function () {
    for( i=2; i < total ; i+=3){
        $('ul li:nth-child(' + i + ')').each(function(n) {
            $(this).css({
                'border-right': '1px solid #000',
                'border-bottom': '1px solid #000',
                'border-left': '1px solid #000'
            });
        });
    }

    j = total;
    k = total - 3;
    for( j=total ; j > total-3; j--){
        $('ul li:nth-child(' + j + ')').each(function(n) {
            $(this).css({
                'border-bottom': 'none'
            });
        });
    }
});

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

How to ensure scrollbar adjusts to increasing height when using scroll:auto?

My <div> element has the style property scroll:auto. Whenever text is added to the <div> and the content height exceeds the default height, I find myself having to scroll down in order to see the latest lines of text that have been added. What ...

Exploring the ins and outs of webpage loading speed

I am working on writing JavaScript code that includes a button to open a webpage of my choice. I now want to understand how to detect when the page I called is finished loading. Any suggestions or ideas on this topic? I apologize if my explanation was no ...

Is it necessary to use the strict doctype if our code is already valid with the transitional doctype?

Are there any drawbacks to using a transitional doctype with presentational or deprecated elements, even if our code is valid in W3C validation with a transitional doctype? Will we need to rewrite or edit the code of websites using XHTML/HTML transitional ...

Leveraging the CSS-Element-Queries Library for emulating the functionality of CSS media queries

Recently, I used a nifty CSS-Element-Queries tool to perform basic element manipulations that trigger whenever the window is resized. In simple terms, my goal was to dynamically adjust an element's attribute based on the current width of the window â ...

Trigger a click based on the CSS path starting from a specific element in the DOM

I am currently developing a feature for mouse activities, such as moving the mouse, clicking, and scrolling. I want to be able to record these activities and then playback them later on. So far, I have successfully recorded mouse movement, and now I need t ...

Do arrays permanently retain the strings stored within them?

As an 11-year-old who has been learning Javascript for the past month and a half, I am currently working on creating a login/register system. Right now, my focus is on the register part. I have a question: when adding a string/number/boolean to an array, d ...

Ways to include additional hyperlinks in my navigation bar

I am seeking ways to enhance my CSS menu so that there is no lag when new links are added. I aim to include 8 additional links if possible. Is there a way to prevent this delay and ensure that the links align correctly? nav { display: inline-block; ...

Utilizing AJAX to upload a file and managing it through a Java servlet on the server side

I've been struggling with this particular issue for the past few days and haven't found any helpful resources elsewhere. I'm attempting to upload a file through an HTML form that includes other input fields: var formData = new FormData() ...

What is the best way to transfer an element and all its children to another div without losing any jQuery functionality?

At first, sharing an example of the JavaScript and HTML from my page is challenging because I couldn't make it work on JSfiddle. The issue I'm facing involves jQuery on a page where I've created two tabs. Essentially, it's the same con ...

Navigate through the parent elements and show the text if the child element is not present

I'm currently exploring how to iterate through all parent classes (.grid) and if there is no child div with the class (.image-container), then to display the (.content-container) within the same (.grid) section. HTML: <style> .grid .content-co ...

Converting HTML Content into Json Data

When trying to update the content area on my website without refreshing the entire page, I encountered difficulties in pulling data from a JSON file. Despite attempts at using AJAX and conducting research on JSON and AJAX techniques, I was unable to succes ...

When viewed on a mobile device, the page defaults to displaying the NumPad instead of the Text Keyboard in Angular

The email field in my angular app is opening a Key Pad in mobile view and I'm not sure why. <form (ngSubmit)="onSubmit()" #emailForm="ngForm"> <div class="emailaddress" style="text-align:center;" *ngIf="!showEmail"& ...

The functionality for determining whether the value isset as 'Yes' or 'No' is not functioning properly in my PHP form

I'm currently working on creating a combined 'Order Calculator / Order Form' using one php form. The calculator part of the form is functioning perfectly and accurately calculates the total for all 5 order options both on the live page and i ...

Visual Delights on the Menu

I am having trouble adding a "Home" picture to my menu. It keeps showing up as a blank square, even though I have tried using both .png and .jpg formats. Here is the code that I am currently using: <div id='cssmenu'> <link rel= ...

Emphasize x-axis heading in a Highcharts graph

In my Highcharts bar graph, I am looking for a way to dynamically highlight the x-axis label of a specific bar based on an external event trigger. This event is not a standard click interaction within the Highcharts graph. Currently, I have been able to r ...

Performing code execution in MVC 5 View every 1 second

I am currently working on a MVC 5 web application and I have a question regarding performing real-time calculations in the view. Below is an example of my view code: var timeRemaining = Model.account.subscriptionEndDate - DateTime.UtcNow; Is there a way ...

- Convert text style and include bullet points: • Alter

Is there a way to convert the script from a Mail_Object to HTML in order to properly format lines 3 and 4 into bullet points, as well as change the font on line 5? I have no knowledge of HTML. The code below functions but does not apply any formatting or ...

combine two columns into a single responsive list group item

Using Bootstrap 4, I created an item list and divided it into two columns (see image). However, when I resized the website to a mobile size screen, it displayed like this: https://i.sstatic.net/0iPHm.png My desired outcome is for the list to display in o ...

Understanding the Intrinsic Dimensions of Replaced Elements in CSS

I'm currently facing some challenges with the CSS Intrinsic & Extrinsic Sizing Module Level 3, specifically chapter 4.1 on Intrinsic Sizes. This section is proving to be quite difficult for me: When a block-level or inline-level replaced element h ...

Crafting a horizontal sub-menu that sits between the parent element and the company logo

Seeking assistance with designing a navigation menu that places the navigation bar above the site logo. I envision the sub-menu expanding horizontally from the navigation bar and positioning itself between the parent navigation bar and the logo. The sub- ...