By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,090 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

Cellpadding for one column

P: n/a
I have one table. When I change the cellpadding of the table it fixes
the fact that the text doesn't touch the edge of the table. Yet it
causes problems with other parts of the table. Is there anyway in CSS
to basically do cell-padding for just one column so it won't affect
that other columns in the table? I just don't want my text to be
hitting the edge of the table.
Jul 20 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a

"Mark Constant" <co*******@mix-net.net> wrote...
Is there anyway in CSS
to basically do cell-padding for just one column so it won't affect
that other columns in the table? I just don't want my text to be
hitting the edge of the table.


You can make a CSS rule and apply that rule to the individual td
elements in that particular column:

CSS:

.pad {
padding: 0 .25em 0 .25em;
}

html:

<table>
<tr>
<td>1, 1</td>
<td>2, 1</td>
<td class="pad">3, 1</td>
<td>4, 1</td>
</tr>
<tr>
<td>1, 2</td>
<td>2, 2</td>
<td class="pad">3, 2</td>
<td>4, 2</td>
</tr>
</table>

The CSS rule above will apply a left and right padding of .25em to any
element with the attribute class="pad". I applied the rule to every
third td element and consequently, to the 3rd column.

regards,
Jim Roberts

Jul 20 '05 #2

P: n/a

"Mark Constant" <co*******@mix-net.net> wrote...
Is there anyway in CSS
to basically do cell-padding for just one column so it won't affect
that other columns in the table? I just don't want my text to be
hitting the edge of the table.


You can make a CSS rule and apply that rule to the individual td
elements in that particular column:

CSS:

.pad {
padding: 0 .25em 0 .25em;
}

html:

<table>
<tr>
<td>1, 1</td>
<td>2, 1</td>
<td class="pad">3, 1</td>
<td>4, 1</td>
</tr>
<tr>
<td>1, 2</td>
<td>2, 2</td>
<td class="pad">3, 2</td>
<td>4, 2</td>
</tr>
</table>

The CSS rule above will apply a left and right padding of .25em to any
element with the attribute class="pad". I applied the rule to every
third td element and consequently, to the 3rd column.

regards,
Jim Roberts

Jul 20 '05 #3

P: n/a
*Jim Roberts* <jr******@msn.com>:

.pad {padding: 0 .25em 0 .25em;}

<tr><td>1, 1</td><td>2, 1</td><td class="pad">3, 1</td><td>4, 1</td></tr>
<tr><td>1, 2</td><td>2, 2</td><td class="pad">3, 2</td><td>4, 2</td></tr>

The CSS rule above will apply a left and right padding of .25em to any
element with the attribute class="pad". I applied the rule to every
third td element and consequently, to the 3rd column.


You'd achieve almost the same result with:

td:first-child+td+td {padding: 0 0.25em}
.pad {padding: 0 0.25em}

<table><col><col><col class="pad"><col>
<tr><td>1, 1</td><td>2, 1</td><td>3, 1</td><td>4, 1</td></tr>
...

At least as long as you don't need 'colspan'.

--
A magician pulls rabbits out of hats.
An experimental psychologist pulls habits out of rats.
Jul 20 '05 #4

P: n/a
*Jim Roberts* <jr******@msn.com>:

.pad {padding: 0 .25em 0 .25em;}

<tr><td>1, 1</td><td>2, 1</td><td class="pad">3, 1</td><td>4, 1</td></tr>
<tr><td>1, 2</td><td>2, 2</td><td class="pad">3, 2</td><td>4, 2</td></tr>

The CSS rule above will apply a left and right padding of .25em to any
element with the attribute class="pad". I applied the rule to every
third td element and consequently, to the 3rd column.


You'd achieve almost the same result with:

td:first-child+td+td {padding: 0 0.25em}
.pad {padding: 0 0.25em}

<table><col><col><col class="pad"><col>
<tr><td>1, 1</td><td>2, 1</td><td>3, 1</td><td>4, 1</td></tr>
...

At least as long as you don't need 'colspan'.

--
A magician pulls rabbits out of hats.
An experimental psychologist pulls habits out of rats.
Jul 20 '05 #5

P: n/a

"Christoph Paeper" <ch**************@nurfuerspam.de> wrote:
You'd achieve almost the same result with:

td:first-child+td+td {padding: 0 0.25em}
.pad {padding: 0 0.25em}

<table><col><col><col class="pad"><col>
<tr><td>1, 1</td><td>2, 1</td><td>3, 1</td><td>4, 1</td></tr>
...

At least as long as you don't need 'colspan'.


Cool. I was trying to think of an easy way that would work in IE as
well. Forgot about the <col> element.

You could also group the selectors:

td:first-child+td+td, .pad {padding: 0 0.25em}

Regards, Jim Roberts

Jul 20 '05 #6

P: n/a

"Christoph Paeper" <ch**************@nurfuerspam.de> wrote:
You'd achieve almost the same result with:

td:first-child+td+td {padding: 0 0.25em}
.pad {padding: 0 0.25em}

<table><col><col><col class="pad"><col>
<tr><td>1, 1</td><td>2, 1</td><td>3, 1</td><td>4, 1</td></tr>
...

At least as long as you don't need 'colspan'.


Cool. I was trying to think of an easy way that would work in IE as
well. Forgot about the <col> element.

You could also group the selectors:

td:first-child+td+td, .pad {padding: 0 0.25em}

Regards, Jim Roberts

Jul 20 '05 #7

P: n/a
*Jim Roberts* <jr******@msn.com>:

Cool. I was trying to think of an easy way that would work in IE as
well. Forgot about the <col> element.
I actually didn't look at the property to apply and am not sure whether it
works for 'padding' as intended (I doubt it), but does so fairly for
instance for the more commonly needed 'text-align'. It shouldn't, though.
You could also group the selectors:

td:first-child+td+td, .pad {padding: 0 0.25em}


IIRC a parser MUST NOT apply rule sets if it doesn't support all of its
selectors.
IE---claimed to be a CSS level 1 browser with some extra support for level 2
(and 3)---does not understand ':first-child' and '+'.

--
To be or not to be---that's no question, it's a decision.
Jul 20 '05 #8

P: n/a
*Jim Roberts* <jr******@msn.com>:

Cool. I was trying to think of an easy way that would work in IE as
well. Forgot about the <col> element.
I actually didn't look at the property to apply and am not sure whether it
works for 'padding' as intended (I doubt it), but does so fairly for
instance for the more commonly needed 'text-align'. It shouldn't, though.
You could also group the selectors:

td:first-child+td+td, .pad {padding: 0 0.25em}


IIRC a parser MUST NOT apply rule sets if it doesn't support all of its
selectors.
IE---claimed to be a CSS level 1 browser with some extra support for level 2
(and 3)---does not understand ':first-child' and '+'.

--
To be or not to be---that's no question, it's a decision.
Jul 20 '05 #9

P: n/a

"Christoph Paeper" <ch**************@nurfuerspam.de> wrote...
I actually didn't look at the property to apply and am not sure whether it works for 'padding' as intended (I doubt it), but does so fairly for
instance for the more commonly needed 'text-align'. It shouldn't, though.

I tested this with ie6 and it worked fine. Not sure about earlier
versions.
You could also group the selectors:

td:first-child+td+td, .pad {padding: 0 0.25em}


IIRC a parser MUST NOT apply rule sets if it doesn't support all of

its selectors.
IE---claimed to be a CSS level 1 browser with some extra support for level 2 (and 3)---does not understand ':first-child' and '+'.


I'll have to look up more information about that. I tested the above
with IE6 and Firefox .8. It worked in both. Again, I'm not sure about
other browsers. It's probably a better bet to make a separate rule for
each selector.

Thanks for the info.
Jim

Jul 20 '05 #10

P: n/a

"Christoph Paeper" <ch**************@nurfuerspam.de> wrote...
I actually didn't look at the property to apply and am not sure whether it works for 'padding' as intended (I doubt it), but does so fairly for
instance for the more commonly needed 'text-align'. It shouldn't, though.

I tested this with ie6 and it worked fine. Not sure about earlier
versions.
You could also group the selectors:

td:first-child+td+td, .pad {padding: 0 0.25em}


IIRC a parser MUST NOT apply rule sets if it doesn't support all of

its selectors.
IE---claimed to be a CSS level 1 browser with some extra support for level 2 (and 3)---does not understand ':first-child' and '+'.


I'll have to look up more information about that. I tested the above
with IE6 and Firefox .8. It worked in both. Again, I'm not sure about
other browsers. It's probably a better bet to make a separate rule for
each selector.

Thanks for the info.
Jim

Jul 20 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.