How to hide specific TD borders in a TABLE using CSS


Tags: html,css,table,borderless

Problem :

I want to have some TDs in a table without border. Here is what i've tried

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 want the TDs with noBorderTD class to have no border and the others to have borders. I'd like to avoid to specify a class using "class=" on every bordered TDs.

What's the best way to do it clean ?



Solution :

Your order of applying styles was wrong. The correct order is:

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

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


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

Explanation: First specify the borders for all the td, then remove the specific td borders which are not needed.

See the fiddle: "https://jsfiddle.net/bwudg7fn/1/"


    CSS Howto..

    How can I avoid div from executing new line if one line is already full?

    how can i add extra element style for external css file?

    How to add vertical and horizontal separators between inline elements in CSS?

    how to position nested list items?

    How to split multiple string using jQuery or javascript?

    Bootstrap dropdown div not showing in non-collapsed view

    How to copy (or reflect instantly) CSS edited on Inspected elements on the browser to the actual css file?

    gwt how to use setStyleName(String style, boolean add) - for a gwt standard widget

    How do I manipulate the same function in javascript for two different classes

    How to slide an element without removing it from DOM ( A psudo slide maybe)?

    How can I put styleName (css) on ui.xml to HTML5 input element (range)

    How do I remove the extra height in my
  • ?
  • Why Does the

    tag creates a black background here? and how do I get rid from the border?

    How to order a css file?

    how to make changes permanently to css elements with -moz-transform?

    How to create a pure CSS tooltip with HTML content for inline elements

    SceneBuilder (by gluon) doesn't show imported fonts

    Node/Grunt - Autoprefixer - How to add configuration to my Gruntfile.js & how to check supported browsers?

    How to create a modal popup using javascript and CSS

    CSS - how to put a opacity border to an input?

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How do you style/select inline-block elements in the first row when in a flexible container?

    how can i prevent to take input onkeypress anything other than alphanumeric

    How to break text inside a parent div with white-space:nowrap in CSS?

    How to disable a CSS class with javascript on window.load()

    How to force inline-blocked divs to same height

    How do I get the background image to not repeat and take up the entire section?

    How SCSS rule evaluation done by browser

    How do I create a mobile version of Nav Bar [closed]

    how to add a fixed position Box on left side of each post [closed]