CODEWITHSUNDEEP
csstwitter-bootstrap-3
kacpr
kacpr

Reputation: 392

Retain table borders overriding previous style

I'm not well experienced in CSS, could somebody tell me how could I override styling so that a cell called "Existing Price Breaks" retains it's left border? Similarly the one below would do the same, splitting the content. But the rest of the header should stay without them as it is now.

Here's the fiddle: http://jsfiddle.net/kacpr/YkL5j/2/

That's the part I would like to override on the 'cell' level:

.table > thead > tr > th, .table > thead > tr > td {
    border: 0;
}

Upvotes: 0

Views: 116

Answers (2)

ernd enson
ernd enson

Reputation: 1764

You could use a class e.g. leftBordered to override the common border definitions like:

/* in html */
<tr>
  <td>Currency</td>
  <td style="font-weight: normal;">EUR</td>
  <td></td>
  <td colspan="2" class="leftBordered">Existing price breaks</td>
  <td colspan="3">New price breaks</td>
</tr>
/* must be applied to all td-fields, that need to be changed */

/* in css */
table > thead > tr > td.leftBordered { 
  border-left: 1px solid #ccc;
}

see fiddle for working example here: http://jsfiddle.net/YkL5j/5/

Upvotes: 1

Minister
Minister

Reputation: 1238

It doesn't seem the proper way of using the CSS selectors, but here is a possible solution (there's no class for the cell, so we use ":nth-child()" as example:

.table > thead > tr > td:nth-child(4) {
    border-left: 1px solid #ff0000;
}

http://jsfiddle.net/YkL5j/3/

If you need backward browser compatibility, then you may need to assign a class to the selected cell: .existingPriceBreaks {}

A better way for using CSS selectors could be:

.table tr td:nth-child(4) {}
.table tr td.existingPriceBreaks {}

...except you plan to use nested tables for some reason...

Upvotes: 1

Related Questions