1

Here's the html:

<table>
    <thead>
        <th><a href="...">Number</a></th>
        <th><a href="...">Description</a></th>
    </thead>
    <tbody>
        <td><a href="...">1234</a></td>
        <td>... description</td>
    </tbody>
</table>

Now adding padding to table a { display: block; padding: 5px; } causes problems when I want to also add the same padding to the td's table td { padding: 5px; }. Maybe I'm over using the padding?

I've worked around it in a number of ways by doing: <th><a href="...">1234</a></th> and then the css only applies to th elements and not td's. And I've also added a class="nolink", but I feel that the th methodology is a bit more semantic than using a class describing its content.

This all comes from the problem that in CSS (that I'm familiar with), there is no way to say, style all td's one way unless an anchor is a descendant. I noticed the :not selector in CSS3, but I'm not sure I understand how to use it in this case?

Update: The problem really is that the padding is added twice to cells with an anchor tag

I didn't explain the actual problem very well, please see this:

http://cssdesk.com/VCtfN

You'll notice the padding when hovering over the links.

2
  • Could you clarify the problem/set up a demo? I fail to clearly understand the problem... >_<
    – Kraz
    Aug 8, 2011 at 17:54
  • @kraz done and updated in the question.
    – dlamotte
    Aug 8, 2011 at 18:08

2 Answers 2

0

A tags are inline elements. Use display:block if you want to use margin and padding.

table a { padding: 5px; display:block }
4
  • Sorry, meant to add display: block into the css. This is not the actual problem.
    – dlamotte
    Aug 8, 2011 at 17:52
  • I updated my question to point at the actual problem. The padding is doubled in the case where the cell contains an anchor tag.
    – dlamotte
    Aug 8, 2011 at 17:54
  • Well yes, it makes sense that it would double - you have two elements that each have padding. If you don't want this, remove the padding from the A tag. Aug 8, 2011 at 17:56
  • I know. But the problem is that padding on the a tag makes links look better with background color changes on hover. I may have assumed too much in my question... I'll add that too.
    – dlamotte
    Aug 8, 2011 at 17:57
0

I see two solutions to this problem :

  1. Add the padding to the td and th, but not to the a. Demo
  2. Encapsulate all anchorless content withing some block element with a 5px padding and remove all padding from td/th. Demo
2
  • as far as #2 goes, it feels wrong doesn't it? Just to add an element for the sake of padding? I was thinking along the lines of using the :not selector somehow, but I don't know if it makes sense in this case. And #1 seems to not address the obvious "ugliness" associated with the background color not filling the entire cell.
    – dlamotte
    Aug 8, 2011 at 18:26
  • Adding an element for the sake of styling isn't wrong at all. You want to add padding to what is inside your cell and you can't target text node in CSS, so you might has well add one element. Even with the :not CSS selector, you'll have to add a node. Like this.
    – Kraz
    Aug 8, 2011 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.