removing borders from a table 1

[Griffyn]

Hi all,

I'm still feeling my way around CSS. I'm modifying the common.css in a Mediawiki installation. I have a table class called 'wikitable' that sets up gray borders around every cell.

I want to be able to specify in a single 'wikitable' table that some of the cells don't have a right-hand border. eg.

<table class="wikitable">
  <tr><td class="nobord">Cell 1<td>Cell2<td>Cell 3
</table>

So that there is no border between Cell 1 and Cell 2.

The CSS has:

table.wikitable {
  margin: 1em 1em 1em 1em;
  background: #f9f9f9;
  border: 1px #aaa solid;
  border-collapse: collapse;
}

table.wikitable th, table.wikitable td {
  border: 1px #aaa solid;
  padding: 0.2em;
}

table.wikitable th {
  background: #f2f2f2;
  text-align: center;
}

table.wikitable caption {
  margin-left: inherit;
  margin-right: inherit;
  font-weight: bold;
}

td.nobord {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-right-width: 0px;
}

But it's still showing the border. What do I need to do?

 

[Vragabond]

Specificity. You're specifying a class (.nobord) and an element (td), while default CSS specifies a class (.wikitable) and two elements (table and td). The latter has higher specificity (means it gets more points and becomes a more important definition). You need to get your specificity higher, say by adding the table class to it:

.wikitable td.nobord {
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-right-width: 0px;
}

More on specificity here:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Griffyn]

you're awesome. thanks!