Can't format table


#1

I have a table that I want to style, and so I created an ID to my styles only apply to this one table, but things aren’t working.

Here is what I have so far…

#tbl_membershipPlans table{
  border-collapse: collapse;
}

#tbl_membershipPlans th,
#tbl_membershipPlans td{
  border: 1px solid #AAA;
}
        <table id="tbl_membershipPlans">
          <!-- Column Headings -->
          <tr>
            <th>Feature</th>
            <th>Guest</th>
            <th>Basic<br/>Access</th>
            <th>Premium<br/>Access</th>
            <th>Premium<br/>+ eBook</th>
          </tr>

          <!-- Rows -->
          <tr>
            <td>News</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
          </tr>
          <tr>
            <td>Articles</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
          </tr>
        </table>

When I run this I get a double-border.


#2

That’s because your telling it to target a child table within #tbl_membershipPlans,
You wrote a descendant selector.

It should be this for border-collapse to work…

#tbl_membershipPlans{
  border-collapse: collapse;
}

#3

What if I said…

table#tbl_membershipPlans{
border-collapse: collapse
}

#4

Yes that would work, but you don’t need to since ID’s are unique.

Honestly you should really be using classes so you don’t get caught up in specificity issues down the road.


#5

Can you help me come up with a better strategy for using styles?

I get the basics in the link you posted, yet this is the dilemma I face…

When I look at old code, it seems like every element in my website is unique - in other words it feels like I am doing inline formatting in HTML.

Here is where I get confused coming up with an “archtectre”…

Let’s say that I have 5 HTML tables in my website, and 4 of them have unique formatting.

If I just used things like table, th, td then I would have to have 5 identically formatted tables.

And if I create ID’s, then I have all but done inline formatting on the 5 tables, right?

So is there a way I can have it both ways? To have the specificity that I desire, but also the flexibility to build things using recycled components so to speak?

I created my #tbl_membershipPlans because my more generic table, th, td are formatted differently and I don’t want to risk breaking everything else on my site, yet it seems destructive to ue an ID that will paint me into a corner in the future.

See where I am confused and stuck?


#6

Just change your existing table name to a class…

I prefer not to use camel case names, save that for JavaScript.

.membership-plans {
}

or just…

.member-plans {
}

As long as you don’t have any other tables or html elements with a class name that matches your table you won’t be picking up their styles in your table.

You can use a class one time like it was an ID, but without the specificity issues that you could encounter when using an ID.