Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css inheritance conflict for <td>

Status
Not open for further replies.
PeDa

PeDa

Technical User
Oct 10, 2002
227
NL
I define my table and its cells as follows:
Code: 
.tbl, .tbl td {border-top:solid 1px blue;border-collapse:collapse;padding:3px;}
and then use
Code: 
<table class='tbl'>

I want to give some specific cells a thicker border-top. Using
Code: 
<td style="border-top:solid 3px blue;"><bla</td>
for these cells doesn't work however. Any suggestions?
 
Sort by date Sort by votes
I cannot reproduce your error. This gives me exactly what you explained:
Code: 
<style type="text/css">

.tbl, .tbl td {
	border-top: solid 1px blue;
	border-collapse: collapse;
	padding:3px;
}

</style>

<table class='tbl'>
  <tr>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
  </tr>
  <tr>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
  </tr>
  <tr>
     <td>Test</td>
     <td>Test</td>
     <td style="border-top:solid 3px blue;">bla</td>
     <td>Test</td>
  </tr>
</table>
 
Upvote 0 Downvote
Thank you Vragabond; yes indeed. Unfortunately I was insufficiently specific. I am trying to modify (among others) the top row (and had only tested that one); it does indeed work for other rows. I suppose it must be a conflict between the different border thicknesses for the table and for the individual cells, whereby that of the table prevails.
 
Upvote 0 Downvote
Slightly different across browsers, but still close enough. This works in IE and Mozilla (my initial code worked ok in Mozilla already).
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<style type="text/css">

.tbl {
    border-collapse: collapse;
}

.tbl td {
    border-top: solid 1px blue;
    padding:3px;
}

</style>

<table class='tbl'>
  <tr>
     <td>Test</td>
     <td>Test</td>
     <td style="border-top:solid 3px blue;">bla</td>
     <td>Test</td>
  </tr>
  <tr>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
  </tr>
  <tr>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
  </tr>
</table>
 
Upvote 0 Downvote
Why not try an alternative solution?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">
.tbl {
    border-collapse: collapse;
}
.tbl td {
    border-top: solid 1px blue;
    padding:3px;
    padding-top: 0;
    margin-top: 3px;
}

span.special {
    border-top:solid 3px blue;
    display: block;
}
</style>

</head>

<body>

<table class='tbl'>
  <tr>
     <td>Test</td>
     <td>Test</td>
     <td><span class="special">bla</span></td>
     <td>Test</td>
  </tr>
  <tr>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
  </tr>
  <tr>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
  </tr>
</table>

</body>
</html>

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Great; and neater than my own (not 100 % CSS):

Code: 
<style type="text/css">

.tbl td {
    border-top: solid 1px blue;
    padding:3px;
}

</style>

<table class='tbl' cellspacing=0>
  <tr>
     <td>Test</td>
     <td>Test</td>
     <td style="border-top:solid 3px blue;">bla</td>
     <td>Test</td>
  </tr>
  <tr>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
  </tr>
  <tr>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
     <td>Test</td>
  </tr>
</table>
Problem quickly solved ;-)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
231
Alt255
Alt255
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
642
PeDa
PeDa
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
770
3esolar
3

Part and Inventory Search

Sponsor

Back
Top