Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
468 views
in Technique[技术] by (71.8m points)

html - How do you specify table padding in CSS? ( table, not cell padding )

I have a table with a colored background and I need to specify the padding between the table and it's content, I.E. cells.
The table tag doesn't seem to accept a padding value.
Firebug shows the table and tbody's layout with padding 0 but doesn't accept any value entered for them, so I guess they just don't have the padding property.
But the thing is I want the same separation between cells than the top cells with the table top and the bottom cells with the table's bottom.
Again, what I want is not cell-padding.

EDIT: Thanks, what I really needed, I realize now, was border-spacing, or its html equivalent, cellspacing.
But for some reason, they don't do anything in the site I'm working on.
Both work great on a separate HTML, but in the site they don't.
I thought it could be some style overwriting the property, but cellspacing and an inline border-spacing shouldn't get overwritten, right?
(I use firefox )

EDIT 2: No, TD padding is NOT what I need. With TD padding, top and bottom paddings of adjacent cells sum up, so there's double the space (pad actually) between two cells than between the top cell and the table top border. I want to have exactly the same distance between them.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The easiest/best supported method is to use <table cellspacing="10">

The css way: border-spacing (not supported by IE I don't think)

    <!-- works in firefox, opera, safari, chrome -->
    <style type="text/css">
    
    table.foobar {
    border: solid black 1px;
    border-spacing: 10px;
    }
    table.foobar td {
    border: solid black 1px;
    }
    
    
    </style>
    
    <table class="foobar" cellpadding="0" cellspacing="0">
    <tr><td>foo</td><td>bar</td></tr>
    </table>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...