CODEWITHSUNDEEP
csshtml-tableborder
NS01
NS01

Reputation: 37

Single td with border CSS

table {
        border-collapse: collapse;
        margin:100px auto;
    }
    
 td {
        margin: 0px;
        padding: 5px;
        text-align: left;
        border:1px solid #080808;
    }
    
.border {
        border: 1px solid #080808;
    }

    
.noborders td {
        border:0;
    }

      
.border_single {

        border: 1px solid #080808;
    }
    
<table>
    <tbody class="border">
        <tr>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td class="border_single">Table WITH border</td>
            <td>Table Cell without borders</td>
        </tr>
    </tbody>
</table>

I'm trying to understand how CSS passes values across a table hierarchy. I've purposely classed a td as "border_single" in order to specifically reference it and apply a basic border. I cant get the border to show, I'm assuming its inheriting the styles from high levels which is why the border for the specific td isnt showing?

Upvotes: 1

Views: 3272

Answers (2)

bdalina
bdalina

Reputation: 523

Your work is correct, you just need to add td in your class

.border_single 
{
   border: 1px solid #080808;
}

to this

td.border_single 
{
   border: 1px solid #080808;
}

Even if you have td.no_borders,td.with_background and more, the td.border_single will still work as specified, you can also use id #border_single or td#border_single to be more specific.

You can also use td:nth-child(n), td:first-child, td:last-child and have the same output, without using id or class

table {
        border-collapse: collapse;
        margin:100px auto;
    }
    
 td {
        margin: 0px;
        padding: 5px;
        text-align: left;
        border:1px solid #080808;
    }
    
.border {
        border: 1px solid #080808;
    }

    
.noborders td {
        border:0;
    }

      
td.border_single {

        border: 1px solid #080808;
    }
    
tr:nth-child(5) > td:nth-child(2)
    {
    border: 1px solid #080808;
    }
tr:last-child > td:nth-child(2)
    {
    border: 1px solid #080808;
    }    
<table>
    <tbody class="border">
        <tr>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td class="border_single">Table WITH border</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>With border using tr:nth-child(n) > td:nth-child(n)</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>With border using tr:last-child > td:nth-child(n)</td>
            <td>Table Cell without borders</td>
        </tr>
    </tbody>
</table>

Upvotes: 1

A. U.
A. U.

Reputation: 52

Problem

Specificity is important in CSS declaration.

The selectors win in the order of:

  1. Importance (by using !important)
  2. Specificity
  3. Source order

Read more here.

.no_borders td is more specific than .border_single, so in: 

    <tr class="noborders">
        <td>Table Cell without borders</td>
        <td class="border_single">Table WITH border</td>
        <td>Table Cell without borders</td>
    </tr>

<td class="border_single">Table WITH border</td> will pick up the style from .no_borders td instead of .border_single.

Solution

One possible solution is to use id instead of class selector as id is more specific than class.

In this case, use <td id="border_single"> in your HTML file and change .border_single to #border_single in your CSS file. You can run the snippet below to see how it works.

table {
        border-collapse: collapse;
        margin:100px auto;
    }
    
 td {
        margin: 0px;
        padding: 5px;
        text-align: left;
        border:1px solid #080808;
    }

.border {
        border: 1px solid #080808;
    }

.noborders td {
        border:0;
    }
      
#border_single {
        border: 1px solid #080808;
    }
<table>
    <tbody class="border">
        <tr>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
            <td>Table Cell with borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
            <td>Table Cell without borders</td>
        </tr>
        <tr class="noborders">
            <td>Table Cell without borders</td>
            <td id="border_single">Table WITH border</td>
            <td>Table Cell without borders</td>
        </tr>
    </tbody>
</table>

Hope this helps!

Upvotes: 1

Related Questions