Hiding specific TD borders in a TABLE with CSS: A step-by-step guide

I am trying to create a table with some TDs without borders. This is what I have attempted so far:

CSS

.calendar-noBorder {
    border: none;
    background-color: red;
}

.calendar-table {
    border-collapse: collapse;
}

.calendar-table td {
    border: 1px solid black;
}

HTML

<table class="calendar-table">
    <tr>
        <td class="calendar-noBorder">&nbsp;</td>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
    </tr>
    <tr>
        <td class="calendar-noBorder">&nbsp;</td>
        <td> a </td>
        <td> b </td>
        <td> c </td>
    </tr>
    <tr>
        <td> aaaaaa</td>
        <td> b </td>
        <td> c </td>
        <td> d </td>
    </tr>
</table>

JsFiddle

I would like the TDs with "noBorder" class to have no border, while the others should have borders. Is there a cleaner way to achieve this without specifying a class on every bordered TD?

What is the most efficient approach to accomplish this?

Answer №1

The sequence in which you applied the styles was incorrect. To achieve the desired result, follow this order:

.calendar-table td {
    border: 1px solid black;
}

td.calendar-noBorder {
    border: none;
    background-color: red;
}


.calendar-table {
    border-collapse: collapse;
}

Explanation: Initially establish borders for all td elements, then eliminate specific td borders that are unnecessary.

View the demonstration here: "https://jsfiddle.net/bwudg7fn/1/"

Answer №2

in place of:

eliminate:border;

Insert -

assign:border-width:0;

for the table cell styles

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

What is the best way to prevent scrolling in one column while allowing another column to scroll normally?

On my website, I have two divs positioned side by side. I am looking to keep one div fixed without scrolling while allowing the second div to scroll normally. How can I achieve this? For a clearer visual, refer to this image: Sample Image ...

Ways to verify the efficiency of view engines such as Pug, EJS, and HTML

Currently, I am in the process of creating a Node.js Web Server. Initially, I decided to use pug as my view engine for this project. However, the Web Designer provided me with HTML files that have a very different syntax from pug. As a result, I am cons ...

Customized placement of form fields on an HTML grid determined by the user

My goal is to organize input elements on a grid based on user preferences. After researching, I stumbled upon CSS grids, which seem promising. I am considering creating a CSS grid with r rows and c columns, then using JavaScript to assign input elements t ...

Utilizing CSS3 to implement multiple backgrounds across various selectors

My goal is to set backgrounds in two different CSS classes, ideally utilizing CSS3's multiple background feature. I aim to achieve this with minimal markup and ensure it is universally applicable. For example: CSS .button { display: block; } . ...

Troubleshooting issues with rowspan in a Datatable

I am currently utilizing jQuery DataTables to display my grid data and implementing the rowspan concept with the rowsGroup option. Initially, it works well by spanning some rows and looking visually pleasing, but eventually, it starts failing. Here are so ...

Design a personalized select element with a unique background hue

https://i.stack.imgur.com/Dzifp.jpg Trying to create a navigation with col-md-9 and select tags but facing an issue where adding a background-color to the div causes the green background of the arrow to disappear. https://i.stack.imgur.com/A4P9Q.png Plea ...

Is there a way to ensure that the elements created by the select form are only generated once?

I have a JavaScript function that dynamically creates paragraph and input elements based on user selection in HTML. However, I am looking to optimize the code so that each element is only created once. Snippet of JavaScript code: function comFunction(sel ...

Tips for arranging divs in CSS grid with grid-template-areas technique

I am attempting to organize similar groups of elements in a grid: #grid { position: absolute; left: 135px; top: 158px; width: 1080px; height: 1035px; display: grid; grid-template-rows: 99px 1fr 1fr; grid-template-column ...

Scrolling up or down in an HTML webpage using a script

Seeking a code snippet for my website that will allow me to achieve the following functionality: Upon clicking on text_head1, a list of lines should scroll down. Subsequently, when I click on text_head2, the previous list should scroll up while the new l ...

What is stopping jQuery from displaying the entire parsed PHP array?

I am attempting to store my product table in an array and utilize JSON for passing it to jQuery, followed by using jQuery and HTML to display it to the user. This is the PHP code used for populating the array: $sql= "SELECT * FROM XXXXXXXXX"; $result = ...

Creating a Multi-Step Checkout System for a WooCommerce Store

Struggling to make my code work - it just won't fire up. I suspect there might be a version-related issue that I'm overlooking. I'm currently using the default checkout setup from the WooCommerce plugin. Instead of buttons, text is showing ...

Why are my buttons displaying uneven spacing?

I'm stumped trying to figure out what's causing the strange spacing issue you can see in this image https://i.sstatic.net/11Fj5.png (unfortunately, I can't embed images yet...sorry) https://i.sstatic.net/z0P5Q.png taken from . Here is the ...

Turn off sticky sidebar feature for mobile-friendly layout

I have encountered an issue with my script that I need assistance with. I am trying to disable this script for responsive or mobile view, but despite trying various methods, it is not functioning as expected. <script type="text/javascript"> $(func ...

I'm looking for an easy way to generate a special effect when my mouse interacts with a div using HTML, CSS, or JavaScript

I'm attempting to replicate this interesting effect where a div is surrounded by a container when the mouse hovers over it. It looks pretty cool, like in this image here: https://i.stack.imgur.com/p0epq.png Does anyone have any suggestions on how I ...

Utilizing the optimal method for aligning text to either the right or left side

I am currently working on creating a container element with multiple child elements. I would like these elements to be aligned differently, some left-aligned and others right-aligned. This includes scenarios where the child elements themselves are containe ...

Transforming react.js into HTML and CSS programming languages

I have a small experiment I need help with. As I am not familiar with react.js, I would like to convert my main.jsx file into pure HTML/CSS/JS without using react. The issue I'm facing is how to handle form data submission to the server in vanilla HTM ...

Update Bootstrap Vue to change the colors of the breadcrumbs

Struggling to customize the look of bootstrap-vue breadcrumbs? I've attempted various combinations of classes and styles in the breadcrumb and breadcrumb-item tags, but to no avail. Every time, I end up with blue or grey text on a light grey backgroun ...

Prevent image element from overflowing in HTML

How can I prevent the images on the right from extending beyond the right padding? I want the fourth image to align with the red block above it. https://i.sstatic.net/KUE62.png Does that clarify things? <div style="margin: 0 15px;height: 40px; back ...

Issue with setting innerHTML of element in AngularJS app upon ng-click event

Look at this block of HTML: <div class="custom-select"> <div class="custom-select-placeholder"> <span id="placeholder-pages">Display all items</span> </div> <ul class="custom-select- ...

Tips for ensuring long text wraps to the next line when it exceeds the width of the browser window

I'm struggling with CSS styles and properties. I want the text to wrap to the next line instead of overflowing off the browser screen. I've illustrated what's currently happening versus what I actually need. https://i.stack.imgur.com/mPGt8 ...