bottom border on table is not appearing

Question

My table class is .bottom and I want the bottom of the table to be a solid black line, all the way across. So I tried this:

<table style="border-bottom-color:#000000">

But that doesnt do it. So I tried this in CSS:

.bottom td {border-bottom: 2px solid black !important;}

and now everything in the table has a black underline( links, td, image) and all I want is the table itself to has a solid black bottom border. Any suggestions are very much appreciated.

What about <table style="border-bottom: 2px solid #000000">? Keeping in mind that it's always better to have that defined in a separate stylesheet. — Christian
– Christian, Commented May 30, 2012 at 1:08

Slava Nossar · Accepted Answer · 2015-09-09 10:17:41Z

For anyone else having a similar issue with borders on tables not appearing, you also might want to make sure you have set table {border-collapse: separate;} otherwise the border won't display, even if it has been styled.

While this behaviour is default, if you are using a template (say, for an eDM), it may have been set to table {border-collapse: collapse;} somewhere in the predefined template styles.

Jeremy Goodell · Accepted Answer · 2012-05-30 01:15:23Z

1

.bottom {border-bottom: 2px solid black;}

answered May 30, 2012 at 1:15

Jeremy Goodell

19.1k5 gold badges37 silver badges54 bronze badges

4 Comments

Rookieatthis Over a year ago

I swear I tried this before and it didn't work, but sure enough it did this time. I must have had a type. Thanks for your help

Jeremy Goodell Over a year ago

Note, if you tried .bottom table { .. }, as was my first inclination, it won't work, because .bottom is the class FOR THE TABLE itself, not a container containing a table.

Rookieatthis Over a year ago

Thats exactly what I did, hehe

uınbɐɥs Over a year ago

@JeremyGoodell: Yes - to get only a <td> with the class .bottom, one would have to use td.bottom

Curtis M · Accepted Answer · 2019-08-05 22:12:00Z

I had this same problem and all I had to do was add some margin-bottom to the table attribute.

 table { table-layout: inherit; width:91.8%; font-family: $fontserrat; margin-bottom: 10px; }

Collectives™ on Stack Overflow

bottom border on table is not appearing

3 Answers 3

Comments

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Related