CODEWITHSUNDEEP
htmlcss
Oleksandr IY
Oleksandr IY

Reputation: 3106

how to get rid outer table border

I need to get rid outer border, just cells border and there should be space between cells . I can't get why it builds this outer border around the table, I just tried this code in separate file 

table {
  border-collapse: separate;
  border-spacing: 4px;
}
table td, table th {
  border: 1px solid black;
}

and it display correctly. But on website content it make this outer border. Can somebody help me?

Upvotes: 0

Views: 3705

Answers (3)

Sampath
Sampath

Reputation: 65860

You Just need to change only one place that is,

Original Code 

table.tribe-events-calendar, .tribe-events-calendar td {
    border: 1px solid #BBBBBB;

After Modification

table.tribe-events-calendar td {
        border: 1px solid #BBBBBB;

You can use Firefox FireBug for inspect and do Live edits for CSS and Jquery.

Upvotes: 0

Francisco Presencia
Francisco Presencia

Reputation: 8841

Just do in your css:

.tribe-events-calendar
  {
  border: 0px!important;
  }

OR

#big
  {
  border: 0px!important;
  }

Or, if it's already there the class or id, modify these values to set them as said. Beware the class, because supposedly it should affect other elements.

Reading again your question, if you set it in a different stylesheet it could happen that it overwrites the values of the 0px with the values of the Npx from the other sheet. Merge them into one, or, if you cannot, put the !important; mark after the css that says 0px.

If nothing works, embed (not include) it at the beginning of your file. Last and least (read: NOT ADVISABLE), use inline css.

Upvotes: 2

lvil
lvil

Reputation: 4326

I tried to add this: "border: none;" to the table element itself inside the HTML and it worked.
I think your problem is this: 

table.tribe-events-calendar, .tribe-events-calendar td {
border: 1px solid #BBB;
}

It overrides your css.
Use chrome's "inspect element" or firebug for Firefox to see the problem.

Upvotes: 1

Related Questions